Alert
À quoi il sert
Alert met un message en avant, avec un ton écrit en clair et une annonce optionnelle.
Quand l’utiliser
- Signaler un résultat, un avertissement ou une information qui doit être lu avec la page.
- Annoncer un message inséré après le chargement, avec live="polite" ou live="assertive".
Quand ne pas l’utiliser
- Pour un message ajouté après le chargement sans live : aucun rôle n’est posé, rien n’est annoncé.
- Pour une action à confirmer : préférence pour Dialog.
Exemples
Tons
Information Nouvelle version
La version 2 des tokens est disponible.
Réussi
Tous les contrôles sont passés.
Dégradé Build lent
La documentation a mis plus de temps que d’habitude à se construire.
Échec Contrôle de taille
Un fichier dépasse 120 lignes.
Messages dynamiques
Sans live, aucun rôle n’est posé : le message est lu dans le flux. Réservezlive aux messages insérés après le chargement : polite donnerole="status", assertive donne role="alert", qui interrompt la lecture.
<Alert tone="failed" toneLabel="Échec" title="Contrôle de taille" live="polite">
<p>Un fichier dépasse 120 lignes.</p>
</Alert>Accessibilité
Clavier
- Le composant n’est pas interactif : il ne prend pas le focus.
- Un lien ou un bouton placé dans l’alerte se parcourt avec Tab.
Lecteur d’écran
- Sans live, aucun rôle : le message est lu dans le flux de la page.
- live="polite" donne role="status" ; live="assertive" donne role="alert", qui interrompt.
- L’icône est masquée (aria-hidden) : le ton est lu par toneLabel.
Garanti par le composant
- L’icône est décorative : aria-hidden="true" et focusable="false".
- Le ton est écrit en clair : la couleur ne porte jamais seule l’information.
- En forced-colors, le filet et l’icône passent en CanvasText.
À la charge de l’intégrateur
- Écrire toneLabel dans la langue de la page.
- Poser live seulement sur un message ajouté après le chargement.
- Garder le titre et le corps lisibles sans la couleur.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| tone | "info" | "passed" | "degraded" | "failed" | 'info' | Nature du message, écrite en clair dans le texte (la couleur n'est jamais seule). |
| toneLabel (obligatoire) | string | — | Libellé visible du ton (par exemple « Information »). |
| title | string | — | Titre court du message. |
| live | "polite" | "assertive" | — | Annonce par les lecteurs d'écran : `polite` attend la fin de la lecture, `assertive` interrompt. Absent : aucune annonce. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-fg--pp-color-line--pp-color-status-degraded--pp-color-status-failed--pp-color-status-passed--pp-color-status-running--pp-color-surface--pp-font-line-height-body--pp-font-size-1--pp-font-weight-semibold--pp-radius-surface--pp-size-rule--pp-space-2xs--pp-space-3xs--pp-space-s--pp-space-xs
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel, niveau A
- WCAG 1.4.1 Utilisation de la couleur, niveau A
- WCAG 4.1.3 Messages d’état, niveau AA : rôles status et alert, dans Alert.test.ts
- Tests unitaires : packages/astro/test/Alert.test.ts
- Code source : packages/astro/src/feedback/Alert.astro