Système de sélection personnalisée et de combo-box

Que fait Système de sélection personnalisée et de combo-box ?

Objectif

Le système de sélection personnalisée et de combo-box fournit une méthodologie systématique pour la conception et la structuration d'options déroulantes, de sélecteurs de recherche avec auto-complétion (combo-box) et de champs de saisie multi-sélection par jetons.

Les éléments <select> HTML standard sont notoirement difficiles à styliser de manière cohérente entre les navigateurs et ne peuvent pas prendre en charge des compositions de mise en page riches (telles que des descriptions, des icônes, des badges ou des sous-grilles dans les choix individuels). Cependant, les listes déroulantes personnalisées sont une source fréquente de défaillances catastrophiques en matière d'accessibilité, de pièges de clavier et de bugs d'utilisabilité. Cette compétence établit des normes de conception, de spatialisation et d'interaction pour garantir que les composants de sélection personnalisés restent visuellement cohérents, hautement réactifs et complètement accessibles (conformes WCAG 2.2 AA).

---

Cas d'utilisation

Appliquez ce système lors de la conception de :

• Listes déroulantes à contenu riche : Éléments de sélection nécessitant des indicateurs visuels, des sous-titres, des métadonnées auxiliaires ou des badges d'état (par exemple, sélecteurs de pays avec icônes de drapeau, commutateurs d'espace de travail ou profils de compte).
• Sélecteurs avec recherche (Combo-box) : Listes déroulantes de plus de 10 options où l'utilisateur doit pouvoir filtrer les choix via un champ de recherche en ligne (par exemple, longues listes d'états/provinces, sélections d'étiquettes).
• Champs de saisie multi-sélection par jetons : Champs où plusieurs sélections sont autorisées et doivent être rendues sous forme de badges/plaquettes pouvant être supprimés, à l'intérieur ou à côté du conteneur du déclencheur.
• Filtres de configuration dynamique : Contrôles de filtre à haute densité (par exemple, dans les barres latérales de commerce électronique ou de tableaux de bord de données) nécessitant un alignement de mise en page riche et un retour contextuel immédiat.

---

Quand ne PAS utiliser

N'appliquez PAS ce système pour :

• Faible volume d'options (2 à 5 options) : Utilisez un système-de-contrôle-segmenté ou des boutons radio groupés standard. Cela évite de cacher les options derrière un clic supplémentaire et réduit la charge cognitive.
• Navigation globale de page : Si cliquer sur un élément de la liste déroulante redirige immédiatement l'utilisateur vers une page différente ou un nœud du plan du site, utilisez le système-de-navigation-du-site ou un menu déroulant imbriqué. Les entrées de sélection sont des champs de formulaire sémantiques destinés à modifier des propriétés, et non à parcourir des plans de site.
• Formulaires standard non stylisés : Pour les formulaires génériques, de faible priorité ou utilitaires (comme les champs de contact de base), revenez aux entrées <select> natives du navigateur. Les listes déroulantes natives offrent une réactivité mobile parfaite et gratuite ainsi qu'un support natif des lecteurs d'écran.
• Palettes de commandes plein écran : Si l'objectif est de rechercher dans toutes les pages et actions de l'application plutôt que de sélectionner une seule valeur de formulaire, utilisez le système-de-palette-de-commandes.

---

Entrées

Avant de concevoir une sélection personnalisée ou une combo-box, rassemblez les exigences suivantes :

1. Cardinalité et densité des options : Combien d'options existent (par exemple, 5, 50, 500+) ? Quelle est la longueur maximale des caractères ?
2. Type de sélection : Sélection unique vs. Sélection multiple ? Liste statique vs. Liste de requêtes filtrées de manière asynchrone (Combo-box) ?
3. Richesse des données : Les options nécessitent-elles des visuels auxiliaires (icônes, avatars, drapeaux, pastilles de couleur) ou du texte de support (sous-étiquettes, modificateurs de prix, nombres d'utilisateurs actifs) ?
4. Contexte de mise en page : Cela se trouvera-t-il dans une barre latérale à haute densité, une page d'accueil spacieuse, une modale superposée ou un tableau de bord de paramètres persistant ?
5. Jetons de marque : Échelle d'espacement (système-d-espacement-fluide), échelle typographique (système-de-typographie-fluide), anneaux de focalisation (système-de-conception-d-indicateur-de-focalisation) et échelles d'ombres d'élévation (système-d-élévation-et-de-profondeur).

---

Résultats

Ce système produit les livrables de conception suivants :

1. Spécification de l'anatomie : Plan détaillé montrant l'espacement, les alignements, les icônes, les règles de troncature de texte et les couches de bordure/fond pour le Déclencheur et le Panneau déroulant.
2. Matrice des états et des interactions : Styles visuels définis pour les états de survol, actif/ouvert, sélectionné, focalisé, désactivé et d'erreur de validation.
3. Modèle adaptatif réactif : Spécifications structurelles détaillant comment la liste déroulante de bureau se traduit sur les écrans mobiles (par exemple, conversion en tiroir/feuille inférieur ou en superposition de repli natif).
4. Carte d'accessibilité (WAI-ARIA & Clavier) : Rôles précis, déclarations de région en direct, états de suivi de la focalisation et comportement de mappage des touches à transmettre aux développeurs.

---

Flux de travail

1. Structurer l'anatomie du composant

Un système de sélection personnalisée complet se compose de deux couches spatiales principales :

A. Le Déclencheur (Le Champ)

• Conteneur : Hauteur adaptée aux entrées de formulaire adjacentes (généralement 40 à 48 px pour permettre les cibles tactiles). Utilise un contour neutre (contraste de 3:1 par rapport au fond de la page) et un rembourrage défini (généralement 12px 16px).
• Emplacement Valeur/Placeholder : Positionné à gauche. Le texte inactif représente un placeholder (contraste >= 4,5:1 par rapport au fond du champ). Le texte sélectionné est stylisé avec un poids neutre primaire.
• Affordance visuelle (Flèche Chevron) : Positionnée à l'extrême droite. Utilisez un chevron pointant vers le bas distinct pour signifier un contenu repliable. Faites pivoter le chevron de 180 degrés lorsque le menu est actif.
• Badges sélectionnés (Multi-sélection uniquement) : Plaquettes en ligne compactes avec des contrôles de fermeture (x) individuels qui s'adaptent ou se tronquent avec des modificateurs de nombre (par exemple, "+3 plus").

B. Le Panneau déroulant (Le Menu)

• Conteneur de superposition : Se trouve sur un niveau Z plus élevé (système-d-élévation-et-de-profondeur Niveau 3/4). Rendu sous le Déclencheur par défaut, ou au-dessus si le bord de la fenêtre d'affichage restreint l'espace inférieur. Utilise une ombre distincte (par exemple, box-shadow avec un flou doux) pour le soulever de la page d'arrière-plan.
• Conteneur de défilement : Définissez des contraintes de hauteur maximale (généralement 240px à 320px / 5 à 8 éléments) pour empêcher le panneau de déborder de la page. Utilisez une piste de défilement visible, empêchant le décalage de la barre de défilement pour les listes plus longues.
• Champ de recherche (Combo-box uniquement) : Un champ de recherche collant épinglé en haut du panneau déroulant avec une focalisation persistante lors de l'activation du menu.

C. Éléments d'Option (Les Choix)

• Disposition : Disposition flexible horizontale composée d'actifs visuels à gauche, de texte principal (et de sous-titre si option riche) au centre, et d'indicateur d'état de sélection (tel qu'une coche) à droite.
• Rembourrage de sécurité : Rembourrage vertical minimum de 8px et correspondance horizontale avec le rembourrage horizontal du déclencheur (12px à 16px).

+------------------------------------------+
|  Sélectionner un pays               [v]  |  <-- Déclencheur (Fermé)
+------------------------------------------+

+------------------------------------------+
|  [Q] Rechercher des pays...              |  <-- Champ de recherche collant
+------------------------------------------+
|  [x] Canada                              |  <-- Option (Sélectionnée & Focalisée)
|      ISO: CA | +1 Indicatif pays         |
|------------------------------------------|
|  [ ] Allemagne                           |  <-- Option (Par défaut)
|      ISO: DE | +49 Indicatif pays        |
+------------------------------------------+

---

2. Formuler la matrice d'état et de retour

Concevez des styles distincts et non ambigus pour chaque état du cycle de vie du composant :

• État par défaut : Le déclencheur utilise un contour clair (contraste minimum de 3:1 par rapport au fond de la page) avec des étiquettes de texte claires (contraste minimum de 4,5:1).
• État de survol : Léger changement de teinte de fond sur le déclencheur (par exemple, gris à faible contraste) et les lignes d'option pour signaler la capacité d'interaction. Le curseur est réglé sur pointer.
• État focalisé : Un anneau de focalisation très visible entourant l'élément actif. Pour les combo-box, la focalisation doit se situer sur le champ de recherche lorsque la liste est ouverte, mais utilisez un traitement de focalisation visuel (par exemple, teinte de fond ou contour actif) sur l'option de liste en surbrillance.
• État actif / développé : Le chevron tourne, le contour du déclencheur change de couleur (par exemple, couleur de marque principale) et le panneau déroulant apparaît avec une transition douce de hauteur et d'opacité (150 ms à 250 ms).
• État sélectionné : Les lignes d'option changent visuellement lorsqu'elles sont choisies. Utilisez une icône de coche à contraste élevé à l'extrême droite et un remplissage de fond subtil. Ne vous fiez pas uniquement à la couleur pour indiquer la sélection.
• État désactivé : L'opacité visuelle est réduite à 40%–50%. Le curseur devient un indicateur not-allowed et l'élément est ignoré dans l'index de tabulation.
• État d'erreur / invalide : Le contour du déclencheur prend une couleur d'erreur de validation (généralement rouge à contraste élevé, >= 3,1 contraste) avec un message d'erreur et une icône d'erreur d'accompagnement en dessous de l'entrée.

---

3. Établir les règles spatiales et de placement

Pour éviter les conflits de mise en page et le décalage de mise en page cumulatif (CLS) :

• Positionnement dynamique (comportement de basculement) : Calculez les limites de la fenêtre d'affichage. Si le conteneur déroulant est proche du pli inférieur de la fenêtre d'affichage, inversez son alignement pour le faire glisser vers le haut au-dessus du déclencheur.
• Alignement de largeur : Le panneau déroulant doit s'aligner exactement avec les bords gauche et droit du déclencheur, ou avoir une largeur minimale définie correspondant au déclencheur pour éviter l'instabilité visuelle.
• Isolation de la superposition : Utilisez une pile z-index CSS qui correspond au niveau 3 (UI collante/flottante) ou au niveau 4 (Superposition et dialogues) de votre système d'élévation. Assurez-vous toujours que le panneau s'affiche au-dessus des éléments de formulaire adjacents, des arrière-plans et des cartes de mise en page.

---

4. Concevoir les adaptations réactives et mobiles

Ne forcez jamais un menu déroulant multi-colonnes ou large pour bureau dans de petites fenêtres d'affichage mobiles. Appliquez ces règles de mise en page adaptative :

Motif A : Feuille inférieure mobile (Recommandé pour les options riches)

Sur les tailles d'écran inférieures à 640px (ou points de rupture tablette standard), transformez le panneau déroulant personnalisé en une Feuille inférieure coulissante :

• Déclencheurs : Appuyer sur le déclencheur ouvre une superposition en feuille inférieure pleine largeur.
• Voile : Un arrière-plan sombre semi-transparent (opacité de 40% à 60%) couvre le contenu principal, rendant les éléments d'arrière-plan non interactifs.
• En-tête : La feuille contient un en-tête collant avec un titre clair et un grand bouton "Fermer" (x) accessible au toucher dans le coin supérieur droit.
• Accessibilité du pouce : Les lignes d'option occupent toute la largeur de l'écran avec une hauteur de cible tactile accrue (min 48 px, préféré 56 px) pour des sélections par tapotement du doigt sans effort.

Motif B : Repli natif (Recommandé pour les listes simples)

Sur les écrans mobiles, masquez complètement le balisage personnalisé des lecteurs d'écran et du DOM visuel, en le remplaçant par un élément <select> natif masqué visuellement et empilé en couches :

• Comment ça fonctionne : Positionnez un <select> standard directement sur le déclencheur personnalisé, stylisé avec opacity: 0.
• Résultat : L'utilisateur voit votre déclencheur personnalisé de marque, mais appuyer dessus active les roues de sélection natives du système d'exploitation (Sélecteur iOS ou Dialogue Android). Cela offre des performances natives inégalées et une accessibilité locale.

---

5. Définir l'architecture du lecteur d'écran et du clavier

Les éléments de sélection personnalisés doivent prendre en charge toutes les technologies d'assistance. Spécifiez ce comportement précis pour la transmission :

Mappages ARIA et sémantique

• Le bouton Déclencheur : Doit avoir role="combobox", aria-haspopup="listbox", aria-expanded="true/false" et aria-controls="listbox-id".
• Le panneau déroulant : Doit avoir role="listbox", étiqueté par l'ID du déclencheur (aria-labelledby="trigger-id").
• Les éléments d'option : Doivent avoir role="option". L'élément actuellement sélectionné doit avoir aria-selected="true", et les autres éléments doivent avoir aria-selected="false".
• Gestion de la focalisation : Pour les combo-box à saisie semi-automatique, le champ de recherche doit avoir aria-autocomplete="list". Utilisez aria-activedescendant="option-id" sur l'entrée pour suivre l'option visuellement mise en surbrillance lorsque l'utilisateur déplace ses touches fléchées vers le haut et vers le bas.
• Annonces en direct : Utilisez aria-live="polite" ou un élément annonceur de lecteur d'écran désigné pour diffuser les changements d'état de sélection ou les mises à jour de comptage (par exemple, "5 options trouvées. Utilisez les touches fléchées pour naviguer.").

Tableau des interactions clavier

Votre fiche de spécification doit imposer ces mappages de touches exacts :

Action	Touche	Comportement attendu
Ouvrir le menu	Espace ou Entrée ou FlècheBas	Ouvre le panneau déroulant, place la focalisation sur la première option (ou la recherche).
Fermer le menu	Échap ou Tab	Ferme le panneau, renvoie la focalisation du clavier au Déclencheur.
Naviguer dans les options	FlècheBas / FlècheHaut	Déplace l'état de surbrillance active vers la ligne d'option suivante ou précédente.
Sélectionner une option	Espace ou Entrée	Sélectionne l'option en surbrillance, met à jour la valeur, ferme le panneau.
Premier/Dernier élément	Début / Fin	Déplace la surbrillance active au début ou à la fin absolue de la liste d'options.
Recherche par saut	Toute touche alphanumérique	Si statique, la focalisation saute immédiatement à la première option commençant par cette lettre.

---

Règles de décision

Arbre de décision des options de sélection personnalisée

Combien d'options totales existent ?
 ├── 2 à 5 options ─────────> Utiliser un CONTRÔLE SEGMENTÉ ou des BOUTONS RADIO GROUPÉS
 ├── 6 à 10 options ────────> Utiliser une SÉLECTION PERSONNALISÉE (Colonne unique, sans champ de recherche)
 └── Plus de 10 options ───> Utiliser une COMBO-BOX (Sélection personnalisée avec champ de recherche intégré)

Choisir le bon motif de sélection

Exigence	Utiliser une sélection standard	Utiliser une combo-box avec recherche	Utiliser des jetons multi-sélection
Limite de sélection	Valeur unique uniquement	Valeur unique uniquement	Valeurs multiples simultanément
Échelle des options	6 à 15 éléments	15 à 100+ éléments	5 à 50 éléments
Type de friction	Faible exploration	A besoin d'une récupération rapide de la cible	Assemblage cumulatif
Disposition des options	Lignes de texte simples	Lignes de liste simples ou riches	Plaquettes/Jetons en disposition enveloppante

---

Contraintes

• Préservation de la focalisation : Lors de la fermeture de la liste déroulante via Échap ou en cliquant à l'extérieur, la focalisation ne doit JAMAIS être perdue ou réinitialisée au niveau supérieur du plan du site. Elle doit revenir programmatiquement à l'élément Déclencheur.
• Visibilité de la focalisation (WCAG 2.2 SC 2.4.11) : Les indicateurs de focalisation sur le déclencheur ou les options actives ne doivent jamais être masqués ou obscurcis par des en-têtes de page collants, des barres inférieures flottantes ou des superpositions qui se chevauchent.
• Cible tactile (WCAG 2.2 SC 2.5.8) : Chaque ligne d'option et élément déclencheur doit avoir une taille cliquable minimale de 24x24px, avec une hauteur de 40px à 48px étant l'exigence de mise en page par défaut pour éviter le chevauchement tactile sur les appareils mobiles.
• **Contraste des couleurs (WCAG

…

[tronqué pour la traduction]