Système de Palette de Commandes

Que fait Système de Palette de Commandes ?

Objectif

Le Système de Palette de Commandes fournit un cadre de conception et spatial pour les menus superposés globaux déclenchés par le clavier (généralement invoqués avec Cmd+K ou Ctrl+K). Dans les applications web modernes à haute densité, les plateformes de développement et les portails de documentation riches en contenu, les barres de navigation standard deviennent submergées. Une palette de commandes agit comme un « centre de commandes », offrant aux utilisateurs expérimentés des chemins clavier directs et sans friction pour rechercher, naviguer et exécuter des actions, tout en servant de dictionnaire interactif des raccourcis clavier.

Ce skill garantit que les palettes de commandes sont spatialement ergonomiques, visuellement structurées pour prévenir la fatigue cognitive, et entièrement conformes aux spécifications d'accessibilité avancées (WCAG 2.2 AA).

Cas d'utilisation

• Concevoir un contrôleur d'espace de travail global piloté par raccourcis pour les tableaux de bord SaaS.
• Structurer des portails orientés développeurs et des portails de recherche documentaire (par exemple, les références API).
• Implémenter des panneaux administratifs à action rapide pour les systèmes CRM ou CMS d'entreprise.
• Créer des interfaces en ligne de commande (CLI) unifiées au sein de produits web complexes et multicouches.

Quand ne PAS utiliser

• Pages d'atterrissage marketing statiques : Où l'intention de l'utilisateur est purement exploratoire et axée sur la conversion ; une barre de navigation globale et des appels à l'action (CTA) clairs sont plus efficaces.
• Sites d'information simples (<15 pages) : Où la surcharge de mise en œuvre et d'enseignement d'une palette de commandes dépasse tout avantage de navigation.
• Sites mobiles grand public simples : Où l'espace d'écran est minimal et où les utilisateurs se fient strictement aux interactions tactiles sans clavier physique externe.

Entrées

1. Inventaire des commandes et actions : Une taxonomie complète des actions, pages, paramètres et documents rechercheables.
2. Règles de mappage contextuel : Règles déterminant quelles commandes sont globales et lesquelles sont spécifiques au contexte (par exemple, « Supprimer le projet » n'apparaissant que lors de la visualisation d'un projet).
3. Système de raccourcis clavier : Un mapping des actions vers des raccourcis clavier physiques (par exemple, G puis D pour « Aller au tableau de bord »).
4. Jetons de design de marque : Échelles typographiques, couleurs, ratios d'espacement et jetons d'ombre (issus de fluid-spacing-system et fluid-typography-system).

Sorties

1. Spécifications de l'affordance du déclencheur : Conceptions visuelles pour les points d'entrée persistants et les badges de raccourcis clavier.
2. Architecture de mise en page de la palette : Structures en grille pour la superposition modale, le regroupement des résultats, la navigation par catégories et les pieds de page d'aide.
3. Spécifications visuelles des lignes de commande : Spécifications de hiérarchie pour les icônes, les titres de commandes, les badges de catégorie et les annotations de raccourcis.
4. Spécifications clavier et accessibilité : Mappings exacts des événements clavier et spécifications d'état ARIA conformes au modèle Combobox de l'ARIA APG.

---

Flux de travail

1. Établir le déclencheur de la palette et les points d'entrée

Parce qu'une palette de commandes est cachée par défaut, vous devez concevoir des points d'entrée découvrables :

• Le déclencheur persistant dans l'en-tête : Un bouton imitant une barre de recherche dans l'en-tête global, avec une icône de loupe, un libellé textuel (par exemple, « Rechercher ou exécuter une commande... »), et un badge de raccourci clavier physique aligné à droite (par exemple, ⌘K ou Ctrl+K).
• Bouton de commande flottant : Pour les tableaux de bord intensifs ou les fenêtres plein écran, placez un bouton déclencheur subtil dans le coin inférieur droit du viewport.
• Écouteur global invisible : Assurez-vous qu'appuyer sur Cmd+K (macOS) ou Ctrl+K (Windows/Linux) n'importe où sur le document (sauf si le focus est dans une zone de texte) ouvre immédiatement la palette.

2. Concevoir la superposition modale et le fond (scrim)

• Fond (Scrim) : Utilisez un fond semi-transparent à contraste élevé (par exemple, rgba(15, 23, 42, 0.4)) pour assombrir la page d'arrière-plan, concentrant l'attention entièrement sur la tâche active.
• Placement vertical : Centrez la superposition horizontalement, mais ancrez-la aux 10 %–15 % supérieurs du viewport, plutôt qu'un centrage vertical absolu. Cela s'aligne avec le niveau des yeux naturel et laisse de l'espace pour le clavier virtuel physique sur les écrans tactiles.
• Limites de taille : Limitez la largeur à une enveloppe de lecture confortable – idéalement entre 600px et 680px. La hauteur doit être dynamique, plafonnée à un maximum de 450px à 550px pour garantir qu'elle ne dépasse jamais des petits écrans d'ordinateur portable.

3. Structurer la grille de mise en page interne

Divisez la palette de commandes en quatre zones horizontales distinctes :

1. La zone de recherche et de filtre : Un champ de saisie sans bordure, pleine largeur, avec une icône de recherche proéminente (min 20px). Utilisez un texte d'espace réservé qui guide l'utilisateur (par exemple, « Tapez une commande ou recherchez... »).
2. La barre de filtre par catégorie (facultative) : Une rangée horizontale de chips compacts ou de contrôles segmentés (par exemple, « Tout », « Actions », « Pages », « Utilisateurs ») pour permettre aux utilisateurs de filtrer les résultats avant de rechercher.
3. Le flux de résultats (conteneur défilant) : Une listbox contenue dans un défilement avec des en-têtes regroupés (par exemple, « Récent », « Navigation », « Paramètres système »).
4. Le pied de page d'aide : Une barre d'état à faible contraste montrant des guides clavier (par exemple, ↑↓ pour naviguer, ↵ pour sélectionner, esc pour fermer).

+-----------------------------------------------------------+
|  [Icône Recherche]  Recherchez ou tapez une commande...   [ESC] |
+-----------------------------------------------------------+
|  ( Tout )  ( Actions )  ( Pages )  ( Membres )  ( Aide )   |
+-----------------------------------------------------------+
|  RECHERCHES RÉCENTES                                       |
|  [Icône] Aller à la facturation                 [ ⌘ G ] [ B ]|
|  [Icône] Créer une nouvelle facture            [ ⌘ N ]     |
|                                                           |
|  NAVIGATION                                               |
|  [Icône] Tableau de bord                                   |
|  [Icône] Paramètres d'équipe                   [ ⌘ , ]     |
+-----------------------------------------------------------+
|  ↑↓ Naviguer  |  ↵ Sélectionner  |  esc Fermer  |  ? Docs d'aide |
+-----------------------------------------------------------+

4. Créer la hiérarchie visuelle des lignes de commande

Chaque élément de la liste des résultats doit être scannable en quelques millisecondes :

• Icône alignée à gauche : Une icône explicite à contraste élevé indiquant le type de l'élément (par exemple, une icône de fichier pour les documents, un engrenage de paramètres pour les actions, un avatar utilisateur pour les personnes).
• Libellé principal : Texte semi-gras de couleur primaire de la commande elle-même (par exemple, « Inviter un membre de l'équipe »).
• Sous-libellé secondaire (facultatif) : Description atténuée et plus petite en dessous ou à côté du libellé principal pour donner du contexte (par exemple, « Paramètres > Organisation »).
• Badges de raccourcis alignés à droite : Affichez le raccourci clavier physique associé à cette commande en utilisant de petits badges de touches à contraste élevé (par exemple, ⌥I).

5. Définir les états interactifs et la sélection au clavier

Une palette de commandes est principalement pilotée par le clavier ; par conséquent, l'état de sélection au clavier prévaut sur le survol de la souris :

• État actif/élément ciblé : Lorsqu'un élément est navigué à l'aide des touches fléchées, appliquez un changement de fond proéminent (en utilisant le jeton de lumière primaire, par exemple, var(--color-primary-light)), et un indicateur de bordure gauche. Le texte principal doit passer à la couleur de la marque.
• État de survol (Souris) : Reflète l'état actif du clavier. Déplacer la souris sur les éléments doit mettre à jour la sélection au clavier pour éviter les doubles états de focus.
• État vide : Lorsqu'une recherche ne renvoie aucun résultat, affichez un état vide illustratif et propre suggérant des actions alternatives (par exemple, « Aucune commande trouvée. Essayez de rechercher dans notre centre d'aide » avec un lien de recherche).
• État de chargement : Si les résultats de la requête de recherche sont récupérés de manière asynchrone, affichez un indicateur de chargement linéaire subtil à la base du champ de saisie, en évitant les squelettes de cartes qui provoquent des changements de mise en page.

---

Règles de décision

• Règle « Cmd+K vs Barre de recherche persistante » : Si la valeur principale du site est la consommation de contenu structuré (comme un catalogue e-commerce), utilisez une barre de recherche persistante. Si la valeur est le flux de travail administratif, l'exécution de commandes ou la navigation dense, utilisez une palette de commandes Cmd+K.
• Règle de limite de regroupement : N'affichez jamais plus de 3 à 4 catégories de commandes simultanément. Limitez les éléments visibles maximum dans chaque catégorie à 5, en fournissant une option « Afficher plus... » s'il y en a plus.
• Règle du « nombre de touches » : Les raccourcis clavier physiques affichés à côté des commandes ne doivent jamais dépasser 3 touches (par exemple, Ctrl+Shift+P est acceptable ; Ctrl+Alt+Shift+Z est trop complexe).
• Règle de contexte dynamique : Filtrez dynamiquement les commandes en fonction de la route active. Si un utilisateur est sur la page de facturation, priorisez « Mettre à jour la carte de crédit » ou « Télécharger la facture PDF » en haut de la liste de résultats par défaut (non tapée).

---

Contraintes

1. Accessibilité (WCAG 2.2 AA Minimum)

• Modèle Combobox ARIA : Vous devez structurer le balisage en suivant strictement le Guide des pratiques de création ARIA (ARIA APG) :
  • Le conteneur de saisie doit avoir role="combobox", aria-expanded="true", aria-autocomplete="list", et aria-controls="command-listbox-id".
  • La liste des résultats doit avoir role="listbox", et chaque ligne de commande doit avoir role="option".
  • Lorsque l'utilisateur appuie sur les touches fléchées, la saisie doit mettre à jour aria-activedescendant pour pointer vers l'ID de l'option active, et cette option doit avoir aria-selected="true".
• Gestion du focus : L'ouverture de la palette doit piéger le focus clavier à l'intérieur de la superposition. Appuyer sur Tab doit soit être intercepté pour naviguer dans la palette, soit être désactivé complètement (en privilégiant les touches fléchées pour la navigation dans les options). La fermeture de la palette doit ramener le focus exactement sur l'élément déclencheur.
• Annonces pour lecteurs d'écran : Placez un div invisible avec aria-live="polite" et aria-atomic="true" à côté de la saisie. Lors de la recherche, remplissez dynamiquement cette zone avec l'état des résultats (par exemple, « 12 résultats trouvés, utilisez les touches fléchées haut et bas pour naviguer »).
• Rapports de contraste : Tout le texte, les badges de raccourcis et les indicateurs de focus doivent respecter le niveau AA WCAG (4,5:1 minimum pour le texte normal, 3:1 pour les bordures UI et les indicateurs de sélection).
• Le verrouillage de l'arrière-plan : Lorsque la palette est active, le reste de l'application doit être rendu inert et caché des lecteurs d'écran. Utilisez <dialog>.showModal() pour obtenir le piégeage du focus, l'assombrissement de l'arrière-plan et la fermeture native par Escape.

2. Adaptabilité et adaptations tactiles

• Ajustement du viewport tactile : Sur les écrans mobiles, la palette de commandes doit passer à une superposition plein écran ou un tiroir coulissant par le bas.
• Gestion du clavier virtuel : Auto-focalisez le champ de saisie lors de l'ouverture, et utilisez inputmode="search" pour garantir que l'appareil mobile affiche le bouton d'action « Rechercher » correct sur son clavier virtuel.
• Masquage des indices physiques : Sur les appareils tactiles uniquement, masquez les badges de raccourcis clavier physiques (par exemple, ⌘K ou ⌥I) car ils sont inutiles et créent un encombrement visuel.
• Taille des cibles tactiles : Les étiquettes supprimables, les chips de catégorie et les lignes de liste doivent avoir une hauteur d'au moins 44px sur les écrans tactiles pour s'adapter aux tapotements des doigts, conformément à WCAG 2.2 SC 2.5.8.

---

Schémas d'échec courants

• Le piège du « défilement infini » : Permettre au flux de résultats d'afficher 100+ correspondances sans conteneur de défilement, débordant de l'écran et rendant les guides de pied de page inaccessibles.
• Absence de verrouillage du défilement de l'arrière-plan : Permettre au document d'arrière-plan de défiler pendant que l'utilisateur navigue dans la palette de commandes, provoquant une désorientation de la mise en page.
• Perte du focus de saisie : Cliquer sur un chip de catégorie ou une option de résultat et perdre le focus clavier de la saisie de texte, obligeant les utilisateurs du clavier à revenir par tabulation.
• Affichage mobile incompréhensible : Conserver une superposition modale minuscule centrée sur un écran mobile de 320px, coupant les libellés principaux et les badges de raccourcis.
• Absence de mise en miroir de l'état du déclencheur : Le bouton persistant de l'en-tête n'affiche pas le raccourci clavier, laissant les utilisateurs du clavier ignorer qu'une palette de commandes existe.

---

Critères de validation

• Un bouton déclencheur persistant est présent dans l'en-tête avec un badge visuel de raccourci Cmd+K / Ctrl+K clair.
• Appuyer sur Cmd+K ou Ctrl+K n'importe où sur la page ouvre la superposition.
• Le focus clavier est immédiatement déplacé vers la saisie de recherche, et le défilement de la page d'arrière-plan est verrouillé.
• La navigation dans les options est pilotée par les touches fléchées Haut et Bas, avec un état actif ciblé très visible.
• Les lignes d'option présentent une hiérarchie structurée : Icône à gauche, titre d'action en gras, hiérarchie de route contextuelle et badge de raccourci à droite.
• Le modèle Combobox de l'ARIA APG est entièrement spécifié, y compris role="combobox", role="listbox", role="option" et aria-activedescendant.
• Une région aria-live="polite" est présente pour annoncer les changements de nombre de résultats de recherche aux lecteurs d'écran.
• Sur les viewports mobiles, la palette s'adapte en plein écran ou en tiroir inférieur, masquant les badges de raccourcis physiques et dimensionnant les lignes à une hauteur minimale de 44px.
• Appuyer sur Escape ou cliquer sur le fond (scrim) ferme la palette et ramène le focus sur le bouton déclencheur.