2024-11-28

TODO.md

@@ -1,12 +1,48 @@
-- Réorganiser les puces sur la page À propos
-
 - Page Panier
   - [-] Bouton « Réinitialiser » pour les Articles
   - [-] Bouton « Réinitialiser » pour les Adresses
-  - Changer le texte du bouton à « Calculate shipping »
 - Emails
 - Gestion des erreurs sur le Panier
 - Ajouter une flèche pour revenir en haut de la page
 - Menu Mobile
   - Reprendre pour suivre la maquette initiale
-- Virer les ressources inutiles WooCommerce sur la page Panier
+- PayPal à faire
+- Styles pour les focus à faire
+  - Boutons
+  - Champs
+- Envoyer des emails aux deux clients
+
+---
+
+## Bouton « Retour en haut »
+
+Un bouton « Retour en haut » permet pour un Utilisateur de rapidement revenir au sommet d'une page fournie en contenu.
+
+Ne pas proposer ce bouton pour des pages faibles en contenus. Hoa Loranger recommende ainsi d'utiliser le seuil de **plus de quatre pages** de contenu (une page correspond à ce qui traversé avec l'appui sur la touche Espace dans le navigateur).
+
+### Apparence et contenu
+
+- Un lien `<a>` vers une ancre située en haut de la page (par exemple `#en-tete`) OU un bouton utilisant _JavaScript_ pour revenir en haut.
+- Cet élément doit en envelopper deux autres :
+  - une icône sous forme de balises `<img>` ou `<svg>` avec un attribut `aria-hidden="true"` ;
+  - un texte « Retour en haut » qui peut être visuellement caché mais toujours accessible par les lecteurs d'écrans via une classe `.visuellement-cache`.
+- Le bouton apparaît au sommet du reste du contenu.
+- On peut idéalement ajouter une impression de profondeur avec l'utilisation d'ombres.
+
+### Comportement
+
+- Le bouton apparaît en bas à droite de l'écran une fois que l'Utilisateur a défilé plus d'une page.
+- Il disparaît en-deça de ce seuil.
+  - Le bouton reçoit alors l'attribut `aria-hidden="true"` et `tabindex="-1"` pour éviter que l'Utilisateur _tab_ dessus par erreur.
+- Quand il reçoit le focus, cela doit être visuellement indiqué.
+- Il est idéalement le dernier élément dans la _tabbing sequence_.
+- Le clic sur le bouton renvoie l'Utilisateur au sommet de la page, avec ou sans défilement doux.
+
+- Considérations pour les Utilisateurs avec lecteurs d'écran :
+  - Le renvoie au sommet de la page doit s'accompagner à un focus sur le premier élément pour le recevoir (par exemple un bouton).
+
+### Liens
+
+- [Creating an accessible 'back to top' button](https://jhartshorne.co.uk/posts/back-to-top/).
+- [Back-to-Top Button Design Guidelines](https://www.nngroup.com/articles/back-to-top/).
+- [Back to Top](https://designsystem.utah.gov/library/components/navigationLinks/backToTop).