Separator
À quoi il sert
Separator rend un filet horizontal entre deux blocs de contenu, avec un espacement choisi.
Quand l’utiliser
- Séparer deux sections d’une même page quand le changement de sujet doit être lu.
- Poser un filet purement visuel avec decorative, sans effet pour les technologies d’assistance.
Quand ne pas l’utiliser
- Pour espacer deux blocs sans filet visible : utiliser les primitives de layout.
- Pour nommer une section : placer un titre avant le séparateur, le composant n’a pas de libellé.
Exemples
Fin de la première section.
Début de la seconde section.
Filet purement visuel.
<Separator />
<Separator decorative />
<Separator space="xl" />Variantes
Accessibilité
Clavier
- Le filet n’est pas interactif : il ne prend jamais le focus.
Lecteur d’écran
- Par défaut, un hr natif est lu comme séparateur.
- Avec decorative, le filet est masqué (role="presentation", aria-hidden="true").
Garanti par le composant
- Élément hr natif, sans texte en dur.
- En mode contraste forcé, le filet prend la couleur CanvasText.
À la charge de l’intégrateur
- Choisir decorative seulement si le filet n’apporte aucune information.
- Placer un titre avant le séparateur si la section doit être nommée.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| decorative | boolean | false | `true` : filet masqué aux technologies d'assistance ; `false` : séparateur lu. |
| space | "xs" | "s" | "m" | "l" | "xl" | 'm' | Espacement autour du filet. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-line--pp-size-rule--pp-space-l--pp-space-m--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- Élément hr, spécification HTML (WHATWG)
- Code source : packages/astro/src/content/Separator.astro