Implémenter correctement
Construis Combobox sans casser son comportement
# Implémenter Combobox dans ton agent ## Objectif Implémente Combobox pour ce comportement vérifié : Un contrôle de valeur avec une surface associée ; il peut être modifiable ou sans saisie, et cette surface peut être une listbox, une grille, une arborescence ou une boîte de dialogue. ## 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 Combobox répond au besoin avant de coder. ## Comportement requis - Le contrôle de valeur possède ou contrôle une surface associée, expose son état développé et suit le modèle clavier du rôle de cette surface. - Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent. ## États à couvrir - Combobox au repos - Suggestions ouvertes - Ville confirmée ## Accessibilité - Rôle ARIA : combobox + popup (listbox | grid | tree | dialog) - Le contrôle principal ou la région nommée pour Combobox 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. - Dans cet exemple modifiable avec popup listbox, le focus DOM reste dans le champ tandis que la relation d’option active communique la navigation ; les autres rôles de surface suivent leur propre modèle de focus. - Échap ferme une surface ouverte sans valider de nouvelle valeur ; la conservation du texte et les autres actions de fermeture dépendent de la variante de combobox. - Le nom, la valeur, l’état développé, la relation à la surface et l’élément actif ou sélectionné pertinent sont exposés ; le chargement et le nombre de résultats s’appliquent lorsque la variante les fournit. - Dans cet exemple modifiable avec popup listbox, la saisie modifie la requête - Flèche bas et haut déplacent l’option active - Entrée valide l’option active - Échap ferme les suggestions sans effacer ## Quand ne pas utiliser - Une courte liste Select native serait plus simple - Aucune surface associée ni aide révélée n’est nécessaire ## Critères d’acceptation - Le comportement modifiable ou sans saisie est explicite - Le rôle de la surface et la relation de contrôle sont explicites - Le focus et le clavier correspondent au rôle de la surface - Échap ferme la surface sans valider de nouvelle valeur ## 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.
- @base-ui/react
- 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 Combobox sur un parcours réel
# Vérifier Combobox après l’implémentation ## Objectif Audite l’implémentation de Combobox 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:bc08475ff93911b75fd2a3b0bc553f58cd7525a1ff00187d987d648308bad5ed