implementation
Construis Menu d’actions déroulant sans casser son comportement
# Implémenter Menu d’actions déroulant dans ton agent ## Objectif Implémente Menu d’actions déroulant pour ce comportement vérifié : Une liste compacte d’actions qui s’ouvre depuis un bouton et suit la navigation clavier d’un menu. ## Prérequis - Inspecte d’abord le dépôt, le design system et les tests existants. - Préserve les changements sans rapport et borne les fichiers modifiés. - Confirme que Menu d’actions déroulant répond au besoin avant de coder. ## Comportement requis - Activer le déclencheur ouvre la surface, puis peut la refermer au second appui. - Les flèches parcourent les actions, puis Entrée ou Espace en active une. - Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent. ## États à couvrir - Menu fermé - Menu ouvert ## Accessibilité - Rôle ARIA : menu > menuitem - Le contrôle principal ou la région nommée pour Menu d’actions déroulant possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom. - L’ouverture place le focus du menu sur un élément disponible ; la fermeture le restaure sur le déclencheur. - Sélectionner une action, appuyer sur Échap ou cliquer sans risque à l’extérieur ferme le menu. - Le déclencheur indique qu’il ouvre un menu, et les noms, états désactivés et états cochés des éléments sont annoncés. - Entrée, Espace ou Flèche bas ouvre le menu - Les flèches parcourent les éléments - Entrée ou Espace active l’élément courant - Échap ferme le menu ## Quand ne pas utiliser - L’utilisateur sélectionne la valeur d’un champ - Le contenu contient des paragraphes explicatifs ou un formulaire ## Critères d’acceptation - Chaque élément est une action et non une valeur de formulaire - La navigation par flèches suit le pattern menu - Les éléments désactivés exposent leur état et ne peuvent pas être activés - La fermeture restaure le focus sur le déclencheur ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- @radix-ui/react-dropdown-menu
- Prérequis · Accès au dépôt, au design system et aux tests
Pourquoi ça marche
- Le besoin est relié au comportement canonique avant toute décision technique.
- Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
- Les critères d’acceptation et le format de sortie rendent la vérification observable.
À essayer ensuite
Vérifie Menu d’actions déroulant sur un parcours réel
# Vérifier Menu d’actions déroulant après l’implémentation ## Objectif Audite l’implémentation de Menu d’actions déroulant au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement. ## Contrôles - Rejoue le plus petit parcours représentatif. - Contrôle le clavier, le focus, le nom accessible et les annonces. - Relie chaque écart à un critère d’acceptation précis. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:c973188e08d6e68be1acb81009e90e9bf197ea089125eff8903b28bf5419c9ce