Composants
Les composants sont les éléments réutilisables du Design System, conçus pour composer des interfaces cohérentes et accessibles.
Chips
Filtres, sélections courtes et éléments retirables.
Aperçu
Le chip représente une sélection courte, souvent utilisée pour filtrer, qualifier une vue ou retirer un critère actif.
Pour une metadonnee non interactive, utiliser une pill informative plutot qu'un chip.
Métadonnée<button class="app-chip" type="button"><span class="app-pill">Usage
Utiliser .app-chip pour afficher une option courte que l’utilisateur peut sélectionner, activer ou retirer dans un groupe.
Cas d’usage fréquents
- Filtrer une liste d’utilisateurs, d’éléments, de projets ou de rapports.
- Afficher des critères actifs que l’utilisateur peut retirer.
- Proposer une sélection courte dans une zone de recherche ou un panneau de filtres.
- Garder des libellés courts : un à trois mots maximum.
Anatomie
| Élément | Rôle |
|---|---|
.app-chip | Base visuelle du composant : forme pill, typographie compacte, affordance interactive possible. |
.app-chip-group | Conteneur de composition pour aligner plusieurs chips et permettre le retour à la ligne. |
.is-selected | État sélectionné léger pour signaler une option choisie sans dominance visuelle forte. |
.is-active | État actif fort, basé sur --app-color-secondary. |
.is-removable | Composition avec une icône de suppression lorsque le chip représente un critère actif retirable. |
.app-pill | Libellé non interactif pour une métadonnée courte, par exemple un mot-clé de carte. |
Variantes
Les variantes de chip décrivent les compositions utiles au-delà des états de base : avec icône, retirable ou désactivé.
.has-icon
.is-removable
.is-disabled
Accessibilité
Le chip peut être purement informatif ou interactif. Son niveau d’accessibilité dépend donc du balisage choisi et de la clarté de son état.
Audit WCAG
| Point contrôlé | Critère | Niveau | Résultat attendu |
|---|---|---|---|
| Contraste texte / fond | 1.4.3 Contraste minimum | AA | À vérifier pour chaque état, en particulier .is-selected et .is-filled. |
| État sélectionné | 4.1.2 Nom, rôle, valeur | A | Conforme si l’état interactif est porté par un élément adapté et une indication accessible, par exemple aria-pressed si le chip agit comme un bouton toggle. |
| Suppression d’un filtre | 2.4.6 En-têtes et étiquettes | AA | Conforme si le bouton retirable possède un libellé explicite, par exemple aria-label="Retirer le filtre Niveau confirmé". |
| Focus clavier | 2.4.7 Focus visible | AA | Conforme si le focus visible utilise --app-focus-ring sur les chips interactifs. |
| Taille de cible | 2.5.8 Taille de cible minimum | AA | À surveiller : le chip interactif doit rester facilement activable, avec une hauteur minimale de 32px. |
Recommandations d’usage
- Utiliser un
buttonpour un chip qui active, désactive ou retire un critère. - Utiliser
aria-pressedsi le chip fonctionne comme un bouton toggle. - Utiliser un
aria-labelexplicite si l’icône de fermeture retire un filtre précis. - Ne pas communiquer l’état sélectionné uniquement par la couleur : le contexte ou le libellé doit rester compréhensible.
- Masquer les icônes décoratives avec
aria-hidden="true".
À éviter
- Ne pas utiliser un chip comme simple badge décoratif si aucune sélection ou action n’est possible.
- Ne pas transformer un chip en bouton principal : utiliser
.app-buttonpour les actions fortes. - Ne pas créer de couleurs locales : l’état actif doit rester aligné sur
--app-color-secondary. - Ne pas utiliser une icône de fermeture sans libellé accessible.
- Ne pas empiler trop de chips sans regroupement clair ou logique de retour à la ligne.
- Ne pas utiliser des libellés trop longs qui cassent la lisibilité du groupe.