haiku-atelier-2024/docs/TODO.md
gcch d30b83d093 2025-07-03
- étoffe le fichier `JOURNAL` avec les nouveaux changements majeurs.
- propose une tâche _Justfile_ pour un rechargement à chaud primitif lors de changements
  CSS.
- ne précompresse pas et ne propose plus de versions « legacy » des scripts JS en methodes
  développement.
- appose correctement `aria-current` sur le lien de la page courante dans les deux menus
  de navigation.
- remplace une image statique « Scroll down » avec une animation SVG reposant sur du texte
  et des chemins.
- renomme moultes choses.
2025-07-03 20:28:03 +02:00

3.3 KiB
Executable file

  • 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

  • PAGE PANIER

    • Erreur lorsque l'on ajoute deux variations d'un même produit et que l'on essaie d'en supprimer une.
    • Il semblerait que supprimer une variation supprime toutes les entrées du même produit.
  • 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
    • Proposer la livraison aux États-Unis.
  • PAGE PRODUIT

  • PIED DE PAGE

  • TOUTES LES PAGES

    • Trouver la source des bordures superflues.
      • Sur Chromium : box-shadow sur
        ?
  • MODE VACANCES

    • Pour l'été, superposer à la page SHOP un calque gris sur lequel défile une animation d'un texte indiquant que la boutique est en vacances.
    • La page doit rester défilable.
  • MODE NO JS

    • Laisser la page normalement défilable avec les images les une après les autres quand JavaScript n'est pas présent.

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 recommande 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