Implémenter correctement
Construis Onglets sans casser son comportement
# Implémenter Onglets dans ton agent ## Objectif Implémente Onglets pour ce comportement vérifié : Un ensemble de libellés qui bascule entre des panneaux de contenu liés en gardant un seul panneau visible à la fois. ## 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’Onglets répond au besoin avant de coder. ## Comportement requis - L’onglet sélectionné affiche son panneau associé tandis que les autres sont masqués. - Les flèches parcourent les éléments liés selon leur orientation visuelle. ## États à couvrir - Onglet Aperçu sélectionné - Onglet Fichiers sélectionné ## Accessibilité - Rôle ARIA : tablist > tab + tabpanel - Le contrôle principal ou la région nommée pour Onglets 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. - La liste est un seul arrêt de tabulation ; le panneau visible est atteint dans l’ordre normal s’il contient des contrôles. - Sans objet : sélectionner un autre onglet remplace le panneau visible sans fermer le composant. - L’état sélectionné et la relation entre chaque onglet et son panneau nommé sont exposés. - Tab entre sur l’onglet sélectionné - Les flèches parcourent les onglets - Entrée ou Espace active en mode manuel - Début et Fin atteignent le premier et le dernier ## Quand ne pas utiliser - Les panneaux doivent être comparés simultanément - Chaque destination mérite sa propre URL et navigation de page ## Critères d’acceptation - Chaque onglet contrôle exactement un panneau - Un seul panneau de même niveau est présenté à la fois - Les flèches et l’activation sont documentées - Les panneaux lents utilisent l’activation manuelle ## 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-tabs
- 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 Onglets sur un parcours réel
# Vérifier Onglets après l’implémentation ## Objectif Audite l’implémentation d’Onglets 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:145b69bb3f5842d16cf98dba9ba4f0eca5aebf94503f68c6718f8f78f20ef55f