Construire un composant Menu Accordéon accessible et persistant
Dans ce septième tutoriel de la série Frontend Moderne, nous construisons un composant accordéon accessible, second élément de notre bibliothèque de composants réutilisables après le theme switch.
Ce que nous allons construire
Un accordéon sémantique et configurable, capable de fonctionner en mode single (un seul panneau ouvert à la fois) ou multiple (plusieurs panneaux ouverts simultanément), piloté par un simple attribut data-accordion en HTML.
Structure sémantique et accessibilité (RGAA / WCAG)
Utilisation de <h3> + <button> pour une structure de titres exploitable par les technologies d'assistance
Gestion complète des attributs ARIA : aria-expanded, aria-controls, aria-labelledby
L'attribut natif hidden pour masquer les panneaux fermés, sans dépendre uniquement du CSS
type="button" systématique pour éviter tout effet de bord si le composant est intégré dans un formulaire
Gestion du focus clavier via :focus-visible
Respect de la préférence système prefers-reduced-motion
Architecture CSS
Nommage BEM (accordion, accordion__item, accordion__trigger, accordion__panel)
Nesting CSS natif
Intégration dans @layer components, cohérente avec l'architecture en couches posée depuis le Tuto 1 de la série CSS
Contrat de composant : variables locales connectées aux tokens sémantiques du projet hôte
JavaScript vanilla
Script minimaliste, sans dépendance
Détection du mode via data-accordion (repli automatique sur multiple si absent)
Fermeture croisée automatique en mode single
Séparation stricte structure / comportement (aucun attribut inline)
Une astuce CSS à retenir
Le tutoriel met en lumière une technique simple et élégante : une animation @keyframes d'opacité posée directement sur le panneau se rejoue automatiquement à chaque bascule de hidden, sans aucune logique JavaScript supplémentaire — le navigateur relance nativement une animation CSS lorsqu'un élément repasse de display: none à visible.
Livrable final
Le composant est intégré à la bibliothèque components/, avec sa documentation (README.md) et sa page de démonstration (exemple.html), sur le même modèle que le theme switch.
- Durée de ce tuto: 01H18min
- Tarif de ce tuto: 13 €
- Date de ce tuto: 2026-11-10
Il y a actuellement 440 tutos
Il y a actuellement 30 bundles
