Tabs
À quoi il sert
Tabs répartit un contenu en panneaux, dont un seul est visible à la fois. Sans JavaScript, tous les panneaux restent lisibles.
Quand l’utiliser
- Regrouper des panneaux de même nature, que le lecteur compare ou parcourt un à un.
- Garder tout le contenu accessible quand le script ne se charge pas.
Quand ne pas l’utiliser
- Pour naviguer entre des pages : utiliser des liens dans un repère nav.
- Pour un contenu à lire en continu : des sections ordinaires suffisent.
Exemples
Jetons
Les jetons définissent couleurs, tailles et espacements, en variables CSS.
CSS
La couche CSS porte la base, le reset, l’impression et les primitives de mise en page.
Composants
Les composants Astro sont publiés en source et lisent uniquement les jetons.
<Tabs label="Langages" tabs={[{ id: 'a', label: 'Astro' }, { id: 'b', label: 'CSS' }]}>
<Fragment slot="a"><p>Contenu du premier panneau.</p></Fragment>
<Fragment slot="b"><p>Contenu du second panneau.</p></Fragment>
</Tabs>Accessibilité
Clavier
- Flèche droite et flèche gauche changent d’onglet et l’activent (activation automatique, motif APG Tabs).
- Les flèches suivent dir : en rtl, elles sont inversées. Home et End vont aux extrémités, avec bouclage.
- Un seul onglet est dans l’ordre de tabulation (tabindex itinérant) ; Tab mène ensuite au panneau.
Lecteur d’écran
- Le script pose role="tablist", role="tab" et role="tabpanel", avec aria-selected et aria-controls.
- La liste porte le nom donné par label ; chaque panneau est nommé par son onglet.
- Non vérifié avec VoiceOver, NVDA ou JAWS : seul le DOM produit est testé.
Garanti par le composant
- Sans script, les liens d’ancre et les sections titrées gardent tout le contenu lisible (WCAG 1.3.1).
- L’onglet actif se distingue par un trait et une graisse, pas par la couleur seule (WCAG 1.4.1).
- Les onglets font au moins la taille minimale de cible (WCAG 2.5.8).
- Le panneau actif reçoit tabindex="0" s’il ne contient rien de focalisable (motif APG Tabs).
À la charge de l’intégrateur
- Fournir des id uniques dans la page, et un slot du même nom pour chaque onglet.
- Le titre de panneau est un h3 : vérifier qu’il suit un h2 dans la page (WCAG 1.3.1).
- Écrire des libellés courts et distincts, dans la langue du site (WCAG 2.4.6).
- L’ancre de l’URL ne choisit pas l’onglet actif : utiliser selected.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| label (obligatoire) | string | — | Nom accessible de la liste d'onglets (`aria-label`), par exemple « Langages ». |
| tabs (obligatoire) | Tab[] | — | Onglets, au moins deux. Chaque `id` désigne un slot nommé qui porte le contenu du panneau. |
| selected | string | — | `id` de l'onglet actif au chargement. Défaut : le premier. |
| 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-color-muted--pp-font-weight-bold--pp-size-focus-offset--pp-size-focus-width--pp-size-rule--pp-size-target-min--pp-space-3xs--pp-space-s--pp-space-xs
Preuves et décisions
- APG : motif Tabs
- WCAG 1.4.1 Utilisation de la couleur
- WCAG 2.5.8 Taille de la cible (minimum)
- Tests : packages/astro/test/Tabs.test.ts et tabs.behavior.test.ts