implementation
Construis Accordéon sans casser son comportement
# Implémenter Accordéon dans ton agent ## Objectif Implémente Accordéon pour ce comportement vérifié : Un ensemble vertical d’en-têtes qui révèle ou masque chaque section de contenu associée. ## 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 qu’Accordéon répond au besoin avant de coder. ## Comportement requis - Activer un en-tête révèle ou masque son contenu associé tout en exposant l’état développé. - Les flèches parcourent les éléments liés selon leur orientation visuelle. ## États à couvrir - Remboursements repliés - Remboursements développés ## Accessibilité - Rôle ARIA : heading > button[aria-expanded][aria-controls] + region - Le contrôle principal ou la région nommée pour Accordéon 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. - Le focus reste sur le bouton d’en-tête lorsque son panneau s’ouvre ou se ferme. - Chaque panneau développé se ferme en activant son propre en-tête lorsque le produit permet le repli. - Le niveau d’en-tête, le nom du bouton, l’état développé et la relation contrôlée sont exposés. - Tab atteint chaque bouton d’en-tête - Entrée ou Espace bascule une section - Les flèches facultatives parcourent les en-têtes ## Quand ne pas utiliser - Tout le contenu est assez court pour être affiché - Les sections sont des destinations principales qui nécessitent des URL ## Critères d’acceptation - Chaque en-tête contient un vrai bouton dans un titre pertinent - L’état développé correspond au contenu visible - L’ouverture simple ou multiple est volontaire - Ouvrir et fermer ne déplace jamais le focus sans raison ## 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-accordion
- 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 Accordéon sur un parcours réel
# Vérifier Accordéon après l’implémentation ## Objectif Audite l’implémentation d’Accordéon 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:ed5aa05ba83b14168b2281b8489ca45fd7d227e71ffa75bf982603fb271fdce0