Skeleton

À quoi il sert

Skeleton affiche un emplacement de chargement en lignes, avec un libellé lu par les lecteurs d’écran.

Quand l’utiliser

• Réserver la place d’un contenu qui se charge.
• Signaler qu’une zone se charge, avec un libellé qui décrit ce qui arrive.

Quand ne pas l’utiliser

• Pour une attente sans forme de contenu prévisible : utiliser Progress, qui porte une valeur.
• Pour signaler une erreur : utiliser un message d’état, pas un emplacement de chargement.

Exemples

<Skeleton label="Chargement du contenu" />
<Skeleton lines={1} label="Chargement du titre" />
<Skeleton lines={6} label="Chargement de l’article" />

Accessibilité

Clavier

• Le composant est statique : il ne reçoit pas le focus.
• Aucune touche n’est gérée par le composant.

Lecteur d’écran

• Le libellé est le texte lu de la zone role="status".
• Les lignes sont masquées aux lecteurs d’écran (aria-hidden="true").

Garanti par le composant

• Le libellé est visible au-dessus des lignes : aucun texte masqué à l’œil.
• La zone est un message d’état, sans focus volé (WCAG 4.1.3).
• L’animation s’arrête sous prefers-reduced-motion et la ligne reste un aplat fixe.
• En forced-colors: active, chaque ligne reçoit une bordure CanvasText.

À la charge de l’intégrateur

• Retirer le composant dès que le contenu est prêt : l’animation boucle (WCAG 2.2.2).
• Fournir un libellé court, dans la langue de la page.
• Ne pas s’appuyer sur le seul composant pour annoncer une erreur (WCAG 4.1.3).

Propriétés

Jetons utilisés

• --pp-color-fg
• --pp-color-line
• --pp-duration-base
• --pp-easing-standard
• --pp-font-size-0
• --pp-radius-control
• --pp-size-rule
• --pp-space-3xs

Preuves et décisions

• WCAG 4.1.3 Messages d’état
• WCAG 2.2.2 Pause, arrêt, masquage
• WCAG 2.3.3 Animation déclenchée par interaction (AAA)
• WAI-ARIA 1.2, rôle status
• Tests : packages/astro/test/Skeleton.test.ts