Switcher
À quoi il sert
Switcher place ses enfants côte à côte au-delà d’un seuil de largeur, puis les empile en dessous.
Quand l’utiliser
- Regrouper deux ou trois blocs qui se lisent mieux côte à côte sur un grand écran.
- Changer la disposition selon la largeur du conteneur, sans media query ni JavaScript.
Quand ne pas l’utiliser
- Pour une disposition en grille à colonnes régulières : utiliser Grid.
- Pour changer l’ordre visuel des blocs : le composant ne réordonne pas, il suit l’ordre du DOM.
Exemples
Seuil par défaut (measure)
Premier bloc.
Deuxième bloc.
Troisième bloc.
Seuil page, espacement large
Premier bloc.
Deuxième bloc.
<Switcher threshold="page" space="l" as="section">
<p>Premier bloc.</p>
<p>Deuxième bloc.</p>
</Switcher>Accessibilité
Clavier
- Le composant n’ajoute aucun élément interactif : Tab ne s’y arrête pas.
- L’ordre de tabulation suit l’ordre du DOM, car aucune propriété order n’est utilisée.
Lecteur d’écran
- Le composant ne pose aucun rôle : les enfants sont lus dans l’ordre du DOM.
- Avec as="ul" ou as="ol", les enfants doivent être des li.
Garanti par le composant
- L’ordre visuel est celui du DOM, quel que soit le seuil (Switcher.astro, aucun order).
- Retour à la ligne en CSS pur, sans JavaScript ni style en ligne (Switcher.test.ts).
À la charge de l’intégrateur
- Vérifier que l’ordre du DOM se lit bien quand les blocs passent sur plusieurs lignes.
- Avec as="ul" ou as="ol", tester la sémantique de liste : display: flex peut la retirer.
- Tester à la largeur réelle du conteneur, pas seulement à la largeur de la fenêtre.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| threshold | "measure" | "page" | 'measure' | Largeur de conteneur sous laquelle les enfants s'empilent. |
| space | "xs" | "s" | "m" | "l" | "xl" | 'm' | Espacement entre les enfants (token `--pp-space-*`). |
| as | "div" | "section" | "ul" | "ol" | "article" | 'div' | Élément rendu ; avec `ul` ou `ol`, les enfants doivent être des `<li>`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-size-measure--pp-size-page--pp-space-l--pp-space-m--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- WCAG 1.3.2 Ordre de lecture signifié (Meaningful Sequence)
- WCAG 1.4.10 Reflow : layout.spec.ts vérifie flex-wrap: wrap, pas la largeur de 320 px
- Tests : packages/astro/test/Switcher.test.ts ; apps/docs/e2e/layout.spec.ts
- Code source : packages/astro/src/layout/Switcher.astro