Système de Menus Déroulants et de Menus Contextuels

Que fait Système de Menus Déroulants et de Menus Contextuels ?

Objectif

La compétence Système de Menus Déroulants et de Menus Contextuels fournit un cadre standardisé pour la conception de menus d'action flottants, de menus débordement, de menus contextuels et de sous-menus en cascade dans les interfaces web. Les menus déroulants affichent une liste organisée de commandes interactives, d'options ou de sous-actions associées à un élément déclencheur (comme un bouton icône, un bouton partagé ou une action contextuelle).

Concevoir un système de menus déroulants efficace nécessite d'équilibrer la disposition spatiale, la hiérarchie visuelle, le regroupement des éléments, la sémantique de navigation au clavier, la gestion des collisions (limites de la fenêtre d'affichage) et l'adaptation réactive sur les viewports tactiles mobiles, sans désorienter les utilisateurs ni enfreindre les directives d'accessibilité WCAG 2.1 AA.

Cas d'utilisation

• Menus d'action et d'option : Présenter des actions secondaires de page ou de ligne (ex. "Modifier", "Dupliquer", "Exporter", "Supprimer") associées à un bouton déclencheur dans des tableaux de données, des cartes ou des en-têtes de page.
• Menus débordement et "Plus" : Héberger des outils de moindre priorité ou des liens de navigation lorsque l'espace du conteneur est limité (ex. boutons "..." dans les barres d'outils ou les en-têtes de tableau).
• Menus contextuels contextuels : Afficher des commandes contextuelles ciblées déclenchées par un clic droit ou un appui long sur un élément visuel spécifique ou des éléments de liste.
• Sous-menus en cascade : Organiser des actions imbriquées ou des options de catégorie à plusieurs niveaux dans un overlay de menu à plusieurs niveaux.
• Menus d'action de sélection (éléments cochables et radio) : Activer/désactiver des états de vue, la visibilité des colonnes ou les préférences de tri dans des panneaux d'action flottants.

Quand ne PAS utiliser

• Sélecteurs de formulaire (combobox et sélecteurs) : Pour les saisies de formulaire où les utilisateurs choisissent une ou plusieurs valeurs pour remplir un champ (ex. sélection d'un pays ou d'une catégorie de produit), utilisez système-de-sélecteur-personnalisé-et-combobox.
• Panneaux de navigation à haute densité : Pour la navigation globale sur plusieurs colonnes contenant des catégories structurées, des pages de destination et des promos marketing, utilisez système-de-navigation-mega-menu.
• Espaces de travail modaux et de tâches complexes : Pour des sous-tâches complexes, des modifications multi-champs ou des formulaires en plusieurs étapes nécessitant un focus préservé, utilisez système-d-overlay-et-de-dialogue ou système-de-feuille-inférieure.
• Aide contextuelle et infobulles : Pour les descriptions textuelles non interactives au survol/au focus expliquant la fonction d'un élément, utilisez système-d-infobulle-et-d-indice.

Entrées

1. Composant déclencheur et géométrie : Type d'élément déclencheur principal (bouton standard, bouton icône, bouton partagé ou zone de cible de clic droit) et positionnement spatial.
2. Inventaire et hiérarchie des éléments de menu : Liste des actions, types d'éléments (standard, cochable, radio, destructif), icônes, raccourcis clavier, séparateurs et libellés de section de groupe.
3. Jetons de surface et d'élévation : Couleurs de fond de surface, styles de bordure, jetons d'ombre portée (--elevation-popover) et positionnement z-index (--z-popover) issus du système-d-élévation-et-de-profondeur et du système-de-couleurs-accessibles.
4. Contexte de la fenêtre d'affichage et de l'appareil : Orientation de l'appareil, point d'arrêt de la largeur d'écran et caractéristiques de prise en charge tactile.

Sorties

1. Plan d'anatomie et de disposition du menu : Spécification structurelle CSS et HTML pour le dimensionnement du conteneur de menu, le remplissage, l'alignement des éléments, les indices de raccourcis finaux et l'espacement des séparateurs de section.
2. Stratégie de positionnement spatial et de gestion des collisions : Règles de disposition pour le positionnement d'ancrage (haut/bas/gauche/droite), l'alignement, la logique de basculement/glissement dynamique et les limites de défilement vertical (max-height).
3. Modèle d'adaptation mobile réactive : Spécification de conception transformant les popovers de bureau étroits en feuilles d'action inférieures (système-de-feuille-inférieure) ou en listes tactiles pleine largeur sur les viewports mobiles.
4. Spécification de l'accessibilité ARIA et de la navigation au clavier : Règles d'accessibilité programmatiques couvrant les rôles ARIA (role="menu", role="menuitem", role="menuitemcheckbox", role="menuitemradio"), les états développés (aria-expanded) et la gestion du focus par touches fléchées.

---

Workflow

1. Définir la structure du menu et l'anatomie des éléments

Classez les éléments du menu en groupes fonctionnels logiques pour maximiser la lisibilité :

• En-têtes et libellés de section : Regroupez les actions connexes en utilisant une micro-typographie en majuscules ou des en-têtes de section discrets (font-size: 0.75rem, font-weight: 600, letter-spacing: 0.05em).
• Composition standard d'un élément : Alignez les éléments horizontalement à l'aide de flexbox (gap: 0.75rem) :
  • Graphique principal : Icône 16x16px ou 20x20px clarifiant le but de l'action.
  • Texte du libellé : Verbe concis orienté action (ex. "Télécharger le PDF", "Dupliquer l'élément").
  • Indice de raccourci final : Texte de raccourci clavier à chasse fixe (ex. ⌘E, Ctrl+D) atténué visuellement (color: var(--text-tertiary)).
  • Chevron final : Indique un déclencheur de sous-menu en cascade (>).
• Types d'éléments spécialisés :
  • Éléments cochables (role="menuitemcheckbox") : Affichent des coches principales lorsqu'ils sont actifs.
  • Éléments radio (role="menuitemradio") : Affichent des points radio lorsqu'ils sont sélectionnés au sein d'un groupe.
  • Éléments destructifs : Stylisez les actions négatives (ex. "Supprimer", "Retirer") avec des jetons de couleur d'avertissement distincts (color: var(--color-danger)), séparés des actions bénignes par une ligne de séparation visuelle.
• Séparateurs (role="separator") : Utilisez des règles horizontales discrètes (1px solid var(--border-subtle)) pour segmenter les groupes d'actions distincts (ex. regrouper les actions d'affichage séparément des actions d'édition/suppression).

2. Établir le positionnement spatial et la gestion des collisions

Configurez les règles de disposition pour que le menu s'affiche proprement à côté de son déclencheur sans déborder des bords de l'écran :

• Alignement d'ancrage : Positionnez le popover du menu par rapport à la limite du bouton déclencheur :
  • Bas-Gauche / Bas-Droite : Positionnement par défaut en dessous du bouton déclencheur. Alignez sur le bord droit lorsque le déclencheur se trouve près du bord droit de l'écran (ex. colonnes d'actions de ligne de tableau de données).
  • Haut-Gauche / Haut-Droite : Inversez la direction au-dessus du bouton déclencheur lorsqu'il est près du bas de la fenêtre d'affichage.
• Règles de collision et de basculement de la fenêtre :
  • Maintenez une marge minimale de 12px par rapport aux bords de l'écran (viewport-margin: 12px).
  • Définissez une contrainte de hauteur maximale (max-height: calc(100vh - 32px)) avec défilement vertical interne (overflow-y: auto) pour les longs menus.
• Jetons d'élévation : Appliquez un empilement de couche supérieure (z-index: var(--z-popover)) et des ombres portées (box-shadow: var(--shadow-popover)) pour séparer visuellement le menu flottant des lignes de tableau ou des cartes d'arrière-plan.

3. Configurer les interactions et la dynamique des sous-menus

• États du déclencheur : Assurez-vous que les boutons déclencheurs indiquent un état ouvert actif à l'aide de aria-expanded="true" et d'un état visuel enfoncé subtil (background-color: var(--bg-hover)).
• Survol et délai clavier du sous-menu :
  • Les sous-menus en cascade s'ouvrent au survol de la souris avec un léger délai intentionnel (timer d'intention de 150 à 200 ms) pour éviter les flashs de déclenchement accidentels lors du déplacement du pointeur.
  • Appuyer sur ArrowRight sur un déclencheur de sous-menu développe le sous-menu et déplace le focus à l'intérieur ; ArrowLeft ferme le sous-menu et ramène le focus sur l'élément de menu parent.
• Déclencheurs de fermeture : Fermez l'overlay du menu ouvert lorsque :
  • L'utilisateur clique en dehors du panneau du menu (écouteur de clic externe).
  • L'utilisateur appuie sur la touche Escape.
  • Une action d'élément de menu actif est exécutée (sauf s'il s'agit d'un élément à bascule cochable).
  • Le focus quitte l'overlay du menu.

4. Concevoir l'adaptation mobile réactive

Les popovers déroulants de bureau (ex. boîtes flottantes de 220px) fonctionnent mal sur les écrans tactiles mobiles en raison de petites cibles tactiles et de besoins de positionnement précis :

• Transformation tactile mobile (< 768px) :
  • Transformez les popovers de bureau en Feuille d'action inférieure (système-de-feuille-inférieure) ancrée au bas de la fenêtre d'affichage.
  • Augmentez la hauteur de ligne des éléments à une cible tactile minimale de 44px (de préférence 48px) avec des zones tactiles horizontales pleine largeur.
  • Fournissez une poignée de glissement visuelle explicite ou un bouton "Annuler" clair en bas de la feuille pour une fermeture facile au pouce.
• Retour tactile : Appliquez des états de fond tactiles actifs distincts (:active) pour un retour tactile immédiat.

5. Programmer l'accessibilité et la sémantique clavier

• Repères ARIA et mappage des rôles :
  • Définissez le bouton déclencheur : aria-haspopup="menu", aria-expanded="true|false", aria-controls="menu-id".
  • Définissez le conteneur du menu : role="menu", aria-labelledby="trigger-id", tabindex="-1".
  • Définissez les éléments du menu : role="menuitem", role="menuitemcheckbox" ou role="menuitemradio".
• Modèle de navigation au clavier :
  • Enter / Space / ArrowDown sur le déclencheur : Ouvre le menu et focalise le premier élément du menu.
  • ArrowDown / ArrowUp : Navigue séquentiellement dans les éléments du menu (en bouclant du haut vers le bas).
  • Home / End : Déplace le focus directement sur le premier ou le dernier élément du menu.
  • Escape : Ferme le menu immédiatement et ramène le focus sur le bouton déclencheur.
  • Tab : Ferme le menu immédiatement et permet la progression standard du focus dans le document.
  • Recherche par saisie anticipée (typeahead) : Appuyer sur une touche de lettre (ex. "D") déplace le focus directement sur le prochain élément du menu commençant par cette lettre.

---

Règles de décision

Sélection du type de menu et du contexte

Contexte / Objectif	Modèle recommandé	Structure ARIA	Adaptation mobile
Actions de ligne / de carte	Menu déroulant d'action	role="menu" / role="menuitem"	Feuille d'action inférieure
Débordement de barre d'outils ("...")	Menu débordement	role="menu" / role="menuitem"	Feuille d'action inférieure
Outils de canevas par clic droit	Menu contextuel	role="menu" / role="menuitem"	Feuille inférieure par appui long
Sélection d'options de formulaire	Sélecteur Combobox	role="combobox" / role="option"	Sélecteur natif / Feuille inférieure
Boutons à bascule de vue/filtre multi-niveaux	Panneau d'action cochable	role="menu" / role="menuitemcheckbox"	Feuille d'action inférieure

Règles de positionnement et d'alignement

• Menus de lignes de tableau de données : Positionnez en haut à droite ou en bas à droite, aligné sur le bouton déclencheur, pour éviter une troncature horizontale au-delà du bord droit de la fenêtre d'affichage du tableau.
• Actions d'en-tête / de navigation : Positionnez en bas à droite ou en bas à gauche selon la proximité du bord de l'écran.
• Sous-menus : Ouvrez à droite (left: 100%) par défaut ; si l'espace à droite est inférieur à 200px, basculez pour ouvrir à gauche (right: 100%).

---

Contraintes

• Accessibilité (WCAG 2.1 AA) :
  • SC 1.4.3 Contraste (Minimum) : Le texte des éléments, les icônes et les indices clavier doivent maintenir un rapport de contraste d'au moins 4.5:1 par rapport à l'arrière-plan du menu.
  • SC 2.1.1 Clavier : Chaque élément et action du menu doit être entièrement accessible et déclenchable via le clavier.
  • SC 2.4.7 Focus visible : Les éléments de menu focalisés doivent présenter des états de focus visuels distincts (ex. changement de couleur d'arrière-plan + indicateur de surbrillance conforme au contraste).
  • SC 2.5.8 Taille des cibles : Les éléments de menu de bureau doivent avoir une hauteur d'au moins 32px ; les éléments de la feuille d'action mobile doivent satisfaire des cibles tactiles d'au moins 44x44px.
• Contraintes de limite de fenêtre d'affichage : Les menus ouverts ne doivent jamais s'étendre hors de l'écran ni créer de barres de défilement horizontales. Utilisez le basculement de collision et le défilement vertical interne (max-height).
• Remplissage et densité spatiaux : Maintenez un remplissage horizontal interne cohérent (ex. padding: 0.5rem 0.75rem) et un remplissage vertical du conteneur (padding: 0.25rem 0).

---

Schémas d'échec courants

• Confusion avec le combobox de formulaire : Utiliser role="menu" pour les listes déroulantes de formulaire au lieu de role="combobox" / role="listbox", ce qui perturbe les lecteurs d'écran quant à la sélection de valeur par rapport à l'exécution de commande.
• Désorientation du focus lors de la fermeture : Ne pas restaurer le focus clavier sur le bouton déclencheur lorsque le menu se ferme via Escape ou la sélection, laissant le focus perdu dans document.body.
• Piège du conteneur de découpage : Placer les menus déroulants dans des cellules de tableau ou des conteneurs avec overflow: hidden, ce qui entraîne le recadrage visuel du menu ouvert.
• Petites cibles tactiles mobiles : Afficher de minuscules éléments de menu de bureau de 24px sur les écrans tactiles sans les convertir en feuilles inférieures adaptées au toucher.
• Fermeture accidentelle du sous-menu : Absence d'un délai de temporisation d'intention sur les sous-menus en cascade, ce qui entraîne l'effondrement des sous-menus lorsque la souris se déplace en diagonale vers un sous-élément.

---

Critères de validation

• Le conteneur de menu utilise une sémantique ARIA appropriée (role="menu", role="menuitem", role="separator").
• La navigation au clavier prend entièrement en charge ArrowDown, ArrowUp, Home, End, Escape et la saisie anticipée de lettres.
• La fermeture du menu (via Escape ou clic sur un élément) restaure programmatiquement le focus sur l'élément déclencheur.
• Les règles de collision de la fenêtre d'affichage basculent ou font défiler les longs menus proprement sans débordement d'écran.
• Le point d'arrêt réactif (< 768px) transforme les popovers déroulants de bureau en feuilles d'action inférieures adaptées au toucher.
• Le texte des éléments, les indices de raccourci et les arrière-plans des indicateurs de focus satisfont le contraste WCAG AA (≥4.5:1).