init

docs/TODO.md

@@ -0,0 +1,60 @@
+- PAGE PANIER
+  - [-] Bouton « Réinitialiser » pour les Articles
+  - [-] Bouton « Réinitialiser » pour les Adresses
+  - [ ] Sauvegarder la dernière adresse validée dans le LocalStorage
+- VITE
+  - Récupérer les liens des fichiers JS depuis le manifeste dans les fichiers PHP
+- Menu Mobile
+  - Reprendre pour suivre la maquette initiale
+- PayPal à faire
+- Styles pour les focus à faire
+  - Boutons
+  - Champs
+- Utiliser un polyfill pour BroadcastChannel
+- PAGE SHOP
+  - [ ] Faire apparaître le menu des catégories de Produits quand on scroll vers le haut
+- PAGE PANIER
+- MÉTHODES DE LIVRAISON
+  - [ ] Proposer la livraison à domicile en Belgique et en France pour le coût unique de 8 euros, quel que soit le montant de la commande
+- PAGE PRODUIT
+  - Retirer les flèches de défilement.
+  - Réduire l'image en focus pour que l'on perçoive les images précédentes/suivantes.
+- PIED DE PAGE
+  - Réduire la hauteur.
+- TOUTES LES PAGES
+  - Trouver la source des bordures superflues.
+
+---
+
+## 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).