Progress
À quoi il sert
Progress affiche l’avancement d’une tâche, ou une mesure dans une plage connue, par un élément natif.
Quand l’utiliser
- Suivre un envoi ou un traitement dont la fin est connue : value et max.
- Afficher une mesure dans une plage connue, avec kind="meter" et ses seuils.
Quand ne pas l’utiliser
- Pour l’issue d’une tâche, réussie ou en échec : utiliser Status, la barre ne la porte pas.
- Pour une valeur sans maximum connu : afficher un texte, une barre suggère une fin.
Exemples
Avancement
3 sur 5
Indéterminé
<Progress id="upload" label="Envoi du fichier" value={3} max={5} valueText="3 sur 5" />
<Progress id="archive" label="Préparation de l’archive" />
<Progress id="disk" kind="meter" label="Espace disque utilisé" value={0.9} low={0.5} high={0.8} optimum={0.2} valueText="90 %" />Variantes
Accessibilité
Clavier
- Le composant n’est pas interactif : il ne reçoit jamais le focus.
- Aucune touche n’est gérée par le composant.
Lecteur d’écran
- Le libellé visible nomme la barre, relié par label for.
- valueText est relié à la barre par aria-describedby.
- Sans value, la barre est indéterminée et n’expose aucune valeur.
Garanti par le composant
- Élément progress ou meter natif, sans rôle ajouté.
- Aucun script ; la valeur est écrite en texte, jamais par la couleur seule.
- Sous prefers-reduced-motion: reduce, l’animation de la barre indéterminée est retirée.
À la charge de l’intégrateur
- Fournir un libellé visible et court : il nomme la barre.
- Mettre à jour value à chaque changement : le composant n’annonce pas les changements.
- Ajouter valueText quand la valeur compte, par exemple « 3 sur 5 ».
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Identifiant de la barre, relié à son libellé. |
| label (obligatoire) | string | — | Libellé visible, nom accessible. |
| kind | "progress" | "meter" | 'progress' | `progress` pour une tâche en cours, `meter` pour une mesure dans une plage connue. |
| value | number | — | Valeur actuelle ; absente pour une progression indéterminée. |
| max | number | 1 | Valeur maximale (défaut : 1, valeur native). |
| low | number | — | Seuil bas d'une jauge (`meter`). |
| high | number | — | Seuil haut d'une jauge (`meter`). |
| optimum | number | — | Valeur optimale d'une jauge (`meter`). |
| valueText | string | — | Texte visible de la valeur. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-control--pp-color-status-degraded--pp-color-status-failed--pp-color-surface--pp-duration-base--pp-easing-standard--pp-radius-control--pp-size-rule--pp-space-2xs--pp-space-3xs
Preuves et décisions
- WCAG 1.4.1 Utilisation de la couleur
- WCAG 4.1.2 Nom, rôle, valeur
- Tests : packages/astro/test/Progress.test.ts