Composants
Les composants sont les éléments réutilisables du Design System, conçus pour composer des interfaces cohérentes et accessibles.
Alertes
Composant autonome de feedback système.
Aperçu
Information contextuelle non bloquante.
Action confirmée ou état validé.
Point d’attention ou élément à vérifier.
Erreur, blocage ou action impossible.
<div class="app-alert is-info" role="note">Usage
Utiliser .app-alert pour afficher une information courte qui doit être distinguée du contenu courant.
- Informer l’utilisateur d’un état système.
- Signaler un succès, une erreur, un avertissement ou une information contextuelle.
- Accompagner une action, un formulaire ou un changement d’état.
- Ajouter un lien ou une fermeture uniquement si cela répond à un vrai besoin utilisateur.
Variantes
Les variantes composées répondent à des besoins précis : permettre la fermeture d’un message temporaire ou proposer un lien contextuel sans transformer l’alerte en zone de contenu complexe.
Cette alerte peut être masquée par l’utilisateur.
Consulte les règles avant de continuer. Voir les règles
Accessibilité
Le composant .app-alert a fait l’objet d’un audit ciblé sur les contrastes, les actions interactives et les rôles d’annonce. L’objectif visé est WCAG 2.2 niveau AA, sous réserve d’un usage correct dans les pages.
Audit WCAG
Les résultats ci-dessous correspondent aux couleurs déclarées dans les fondations et dans le CSS du composant.
| Point vérifié | Critère | Niveau | Résultat |
|---|---|---|---|
| Texte du titre | 1.4.3 Contraste minimum | AA | Conforme : contraste mesuré entre 14.69:1 et 15.59:1 selon la variante. |
| Texte courant | 1.4.3 Contraste minimum | AA | Conforme : .app-paragraph utilise --app-color-muted, avec un contraste mesuré entre 5.51:1 et 5.85:1. |
| Icônes de variante | 1.4.11 Contraste non textuel | AA | Conforme : contraste mesuré entre 3.85:1 et 6.13:1. La variante warning utilise --app-color-efficient pour garantir le contraste. |
| Lien dans une alerte | 1.4.3 Contraste minimum | AA | Conforme : .app-link utilise --app-color-primary, avec un contraste mesuré entre 6.13:1 et 6.51:1. |
| Bouton de fermeture | 4.1.2 Name, Role, Value | A | Conforme si le bouton reste un élément HTML button natif avec un libellé accessible. |
| Focus du bouton | 2.4.7 Focus visible | AA | Conforme : .app-action-button:focus-visible affiche --app-focus-ring. |
| Taille de cible | 2.5.8 Target Size Minimum | AA | Conforme pour le bouton de fermeture utilisé avec .app-icon-button : cible 40 × 40px, supérieure au minimum 24 × 24px. |
Recommandations d’usage
- Utiliser le rôle note pour une information simple et non prioritaire.
- Utiliser le rôle status pour un message de statut non bloquant.
- Utiliser le rôle alert uniquement si le message doit être annoncé immédiatement.
- Prévoir un libellé accessible sur le bouton de fermeture, par exemple
aria-label="Fermer l’alerte". - Masquer l’icône aux technologies d’assistance si le texte porte déjà le sens.
- Ne pas utiliser uniquement la couleur pour transmettre l’information : conserver un titre, une icône ou un libellé explicite.
À éviter
- Ne pas utiliser une alerte comme conteneur de mise en page.
- Ne pas y placer de longs contenus éditoriaux.
- Ne pas empiler plusieurs alertes sans hiérarchie claire.
- Ne pas créer de variante locale si une variante DS existe déjà.