Cluster
À quoi il sert
Cluster aligne ses enfants sur une ligne, les fait passer à la suivante au besoin et garde le même écart entre eux.
Quand l’utiliser
- Grouper des étiquettes, des boutons ou des liens courts qui doivent rester côte à côte.
- Donner une navigation secondaire courte, avec as="nav" et un label.
Quand ne pas l’utiliser
- Pour des blocs longs ou des paragraphes lus dans l’ordre : utiliser Stack.
- Pour des colonnes de même largeur : utiliser Grid.
Exemples
- Accessibilité
- Typographie
- Performance
- Impression
<Cluster as="nav" label="Liens de l’exemple Cluster" justify="center" space="l">
<a href="#accessibilite">Accessibilité</a>
<a href="#proprietes">Propriétés</a>
</Cluster>Variantes
À gaucheÀ droite
PremierSecond
Accessibilité
Clavier
- Le composant ne prend pas le focus et ne change pas l’ordre de tabulation.
Lecteur d’écran
- Avec as="ul" ou as="ol", role="list" est posé : VoiceOver garde la sémantique de liste.
- Avec as="nav" et label, le repère est nommé ; sans label, il est anonyme.
Garanti par le composant
- list-style: none sur ul et ol, avec role="list" explicite.
- Espacement par gap ; les enfants n’ont pas de marge.
À la charge de l’intégrateur
- Donner un label à chaque nav si la page en contient plusieurs.
- Dimensionner les liens et boutons à au moins --pp-target-min : le composant ne le fait pas.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| space | "xs" | "s" | "m" | "l" | "xl" | 's' | Espacement entre les enfants (token `--pp-space-*`). |
| justify | "start" | "center" | "end" | "between" | 'start' | Répartition des enfants dans l'axe en ligne. |
| align | "start" | "center" | "end" | "baseline" | 'center' | Alignement des enfants dans l'axe de bloc. |
| as | "div" | "ul" | "ol" | "nav" | 'div' | Élément rendu ; avec `ul` ou `ol`, les enfants doivent être des `<li>`. |
| label | string | — | Nom accessible, rendu en `aria-label` (utile avec `as="nav"`). |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-space-l--pp-space-m--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- WCAG 1.3.1 Information et relations (niveau A) : la liste reste balisée ul ou ol.
- WCAG 1.4.10 Reflow (niveau AA) : le passage à la ligne évite le défilement horizontal.
- Tests : packages/astro/test/Cluster.test.ts, apps/docs/e2e/layout.spec.ts (gap)
- Source citée dans Cluster.astro : Scott O’Hara, « "Fixing" Lists », 2019.