'/%3E%3C/svg%3E){kind=small}
Nouveau Components
Chips
La chips est une forme visuelle compacte, en général une capsule contenant un texte court et parfois une icône. Ce n’est pas un composant unique : sous une même apparence, une chips peut être un filtre que l’on active et désactive, ou une valeur saisie que l’on retire. Chaque variante relève d’un modèle d’interaction distinct et se construit avec le bouton natif, l’apparence étant obtenue par le CSS.
Quand utiliser une chips
- Filtres activables : proposer plusieurs critères que l'utilisateur active et désactive librement, sans quitter la page.
- Valeurs saisies : matérialiser ce que l'utilisateur a déjà ajouté, mots-clés, destinataires, compétences, chacune retirable.
- Choix courts et nombreux : quand les options tiennent en un ou deux mots et qu'on veut les voir toutes d'un coup d'œil.
Quand ne pas utiliser une chips
- Pour afficher un état : une valeur que l'on ne peut ni activer ni retirer est un badge.
- Pour un choix unique et exclusif : utiliser des boutons radio, dont la sémantique dit déjà qu'une seule réponse est possible.
- Pour une liste très longue : au-delà d'une dizaine d'entrées, préférer une liste déroulante avec filtrage.
Modes d'action
- Souris : un clic active ou désactive le filtre, ou retire la valeur.
- Clavier : chaque chips est un bouton natif, atteignable par tabulation, activable par Entrée et Espace. Sur les chips supprimables, Suppr et Retour arrière sont un raccourci supplémentaire, jamais le seul moyen.
- Lecteur d'écran : l'état d'un filtre est porté par aria-pressed. Le nom accessible d'une chips supprimable reprend l'intitulé visible suivi de l'action.
Contenu
- Un ou deux mots : l'intitulé doit tenir sur une ligne et rester lisible sans le contexte voisin.
- Des intitulés distincts : deux chips identiques porteraient le même nom accessible et deviendraient impossibles à distinguer à la voix.
- Pas de comptage dans le libellé : le nombre de résultats appartient à la zone de résultats, pas au bouton.
Mots-clés
- Chips : petit bouton compact représentant un filtre activable ou une valeur retirable.
- aria-pressed : état d'un bouton à bascule, activé ou non. Il ne convient qu'à un bouton, jamais à un lien.
- Région live : zone dont la modification est annoncée sans déplacer le focus.
- Nom accessible : le texte restitué pour un élément. Sur une chips supprimable, il combine l'intitulé et l'action.
Décomposition des composants
Deux usages très différents partagent la même apparence. Ils ne se codent pas de la même façon.
Chips de filtre
- Chaque chips est un bouton natif portant aria-pressed. L'état est donc annoncé par le lecteur d'écran, en plus d'être visible.
- L'état activé n'est pas signalé par la seule couleur : une coche est dessinée dans le bouton (WCAG 1.4.1).
- Le nombre de résultats est annoncé après un délai de 500 ms, le temps que le lecteur d'écran ait fini d'annoncer le nouvel état de la chips.
Chips supprimables
- Le nom accessible reprend l'intitulé visible suivi de l'action, « RGAA, Supprimer » : la commande vocale reste possible (WCAG 2.5.3).
- Après suppression, le focus part à la chips suivante, ou au champ de saisie si la liste est vide. Il ne retombe jamais sur le document (WCAG 2.4.3).
- La liste porte role="list" : sans lui, la suppression des puces en CSS retire la sémantique de liste et le nombre d'éléments n'est plus annoncé.
- Un doublon est refusé avec un message, plutôt qu'ignoré en silence.
Lecteur d'écran
- Une chips est toujours un bouton. Un lien ne porte pas d'état et ne peut pas être une bascule.
- Sur un filtre, aria-pressed suffit : ni rôle supplémentaire, ni texte caché décrivant l'état.
- Sur une chips supprimable, l'action figure dans le nom accessible, pas seulement dans une croix décorative.
- Toute annonce passe par une région live présente dès le chargement, et vide.
Les deux variantes reposent sur le bouton natif : aucune interaction n'est à reconstruire. Chaque chips constitue un arrêt de tabulation.
| Touche | Fonction |
|---|---|
| Tab | Déplace le focus vers la chips suivante. Aucun tabindex glissant : chaque chips ne porte qu'une seule commande. |
| Maj + Tab | Déplace le focus vers l'élément précédent. |
| Entrée ou Espace | Active ou désactive une chips de filtre, dont l'état aria-pressed est annoncé. Supprime une chips supprimable. |
| Suppr ou Retour arrière | Supprime la chips qui a le focus. Raccourci supplémentaire, jamais le seul moyen de supprimer. |
Note : après une suppression, le focus part à la chips suivante, ou au champ de saisie si la liste est vide. Il ne retombe jamais sur le document. Le message de confirmation attend 500 ms, le temps que le lecteur d'écran ait annoncé le nouvel élément focalisé.