Accordion
À quoi il sert
Accordion groupe des sections repliables, construites sur les éléments natifs details et summary.
Quand l’utiliser
- Replier des questions fréquentes ou des sections longues d’une même page.
- Limiter l’ouverture à un panneau à la fois avec exclusive, quand les sections s’excluent.
Quand ne pas l’utiliser
- Pour une navigation entre pages : utiliser une liste de liens.
- Pour des contenus à comparer : garder les sections ouvertes (préférence).
Exemples
Quel élément HTML est utilisé ?
Un details par panneau, avec un summary pour titre.
Comment l’utiliser au clavier ?
Tab atteint le titre, Entrée ou Espace ouvre et ferme le panneau.
Quand l’ouverture est-elle animée ?
Sous prefers-reduced-motion: no-preference, si le navigateur gèreinterpolate-size.
---
const items = [
{ id: 'one', summary: 'Premier panneau', open: true },
{ id: 'two', summary: 'Deuxième panneau' },
];
---
<Accordion items={items} exclusive>
<p slot="one">Contenu du premier panneau.</p>
<p slot="two">Contenu du deuxième panneau.</p>
</Accordion>Variantes
Premier panneau
Ouvrir un autre panneau referme celui-ci.
Deuxième panneau
Sans support de name, les panneaux restent indépendants.
Accessibilité
Clavier
- Tab donne le focus à chaque titre, dans l’ordre du document.
- Entrée ou Espace ouvre et ferme le panneau du titre actif.
Lecteur d’écran
- L’état replié ou déplié vient de details, sans attribut ajouté.
- Le chevron est masqué (aria-hidden="true") : le titre seul porte le nom.
Garanti par le composant
- Zéro JavaScript : l’état vient du navigateur.
- Le marqueur natif est masqué ; un contour de focus visible entoure le titre.
- L’ouverture n’est animée que sous prefers-reduced-motion: no-preference.
À la charge de l’intégrateur
- Donner des id uniques dans un accordéon : ils servent de slots et de nom de groupe.
- Garder un titre clair : il est le seul libellé du panneau.
- Pour exclusive, prévoir le repli : sans name, les panneaux restent indépendants.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| items (obligatoire) | Item[] | — | Sections : `{ id, title, body }` ; le titre ouvre et ferme la section. |
| exclusive | boolean | false | Une seule section ouverte à la fois (`<details name>`). |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-fg--pp-color-focus--pp-color-line--pp-duration-base--pp-easing-standard--pp-font-weight-medium--pp-size-control-height--pp-size-focus-offset--pp-size-focus-width--pp-size-rule--pp-size-target-min--pp-space-2xs--pp-space-s
Preuves et décisions
- WCAG 2.4.7 Focus visible
- WCAG 4.1.2 Nom, rôle, valeur
- Tests : packages/astro/test/Accordion.test.ts