Status
À quoi il sert
Status affiche l’état d’un pipeline par un libellé écrit et une icône de forme propre à l’état.
Quand l’utiliser
- Afficher le résultat d’un build, d’un test ou d’un déploiement, sur une ligne.
- Afficher un identifiant court, comme une empreinte de commit, avec mono.
Quand ne pas l’utiliser
- Pour une progression chiffrée : utiliser Progress, qui porte une valeur.
- Pour un message d’erreur détaillé : Status ne porte qu’un état et un libellé court.
Exemples
RéussiÉchecDégradéEn cours
<Status state="passed" label="Réussi" />
<Status state="failed" label="Échec" />
<Status state="degraded" label="Dégradé" />
<Status state="running" label="En cours" />
<Status state="passed" label="3f9c2ab" mono />Variantes
3f9c2ab
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 ; l’icône est masquée (aria-hidden="true").
- Aucun rôle n’est posé : le contenu est lu comme du texte ordinaire.
Garanti par le composant
- L’état est écrit en clair et porté par une forme d’icône distincte pour chaque état.
- La couleur ne colore que l’icône ; le texte garde la couleur de premier plan.
- En forced-colors: active, l’icône prend la couleur CanvasText.
À la charge de l’intégrateur
- Fournir un libellé court qui décrit l’état, dans la langue du site.
- Ne pas ajouter de couleur seule à côté du composant pour transmettre l’état.
- Poser role="status" autour des mises à jour à annoncer : le composant ne le fait pas.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| state | "passed" | "failed" | "degraded" | "running" | 'running' | État affiché, avec sa forme d'icône propre et son libellé. |
| label (obligatoire) | string | — | Libellé visible de l'état (par exemple « Réussi »). |
| mono | boolean | false | Police mono, pour un identifiant tel qu'une empreinte de commit. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-fg--pp-color-status-degraded--pp-color-status-failed--pp-color-status-passed--pp-color-status-running--pp-font-family-mono--pp-size-target-min--pp-space-2xs
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel
- WCAG 1.4.1 Utilisation de la couleur
- Tests : packages/astro/test/Status.test.ts