Implémenter correctement
Construis Vue arborescente sans casser son comportement
# Implémenter Vue arborescente dans ton agent ## Objectif Implémente Vue arborescente pour ce comportement vérifié : Un widget composite pour parcourir des éléments hiérarchiques dont les nœuds parents peuvent développer ou replier leurs groupes enfants. ## 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 Vue arborescente répond au besoin avant de coder. ## Comportement requis - Haut et Bas parcourent les éléments visibles ; Gauche et Droite naviguent entre les niveaux parent-enfant. - Un élément parent expose ou masque son groupe d’enfants tandis que focus et sélection restent distincts. ## États à couvrir - Arborescence au repos - Parent réduit focalisé - Parent développé focalisé - Enfant focalisé - Enfant sélectionné ## Accessibilité - Rôle ARIA : tree > treeitem + group - Le contrôle principal ou la région nommée pour Vue arborescente 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. - Utilise roving tabindex ou aria-activedescendant de façon cohérente et distingue le focus visible de aria-selected ou aria-checked. - L’arborescence ne se ferme pas ; Gauche réduit un parent ouvert et Échap n’est pas une commande obligatoire. - Chaque treeitem expose son nom, son niveau, sa position, son état développé s’il est parent et une propriété de sélection cohérente ; les nœuds terminaux n’exposent jamais aria-expanded. - Tab entre une seule fois dans l’arborescence - Haut et Bas parcourent les nœuds visibles - Droite ouvre un parent ou atteint son premier enfant ; Gauche ferme ou revient au parent - Début et Fin atteignent les premier et dernier nœuds ; la saisie anticipée trouve une correspondance - Entrée exécute l’action par défaut et la sélection suit le modèle déclaré ## Quand ne pas utiliser - Les éléments forment une liste plate - Le contenu est un plan statique ou des révélations indépendantes ## Critères d’acceptation - L’arborescence possède un nom accessible - Chaque nœud est un treeitem dans le bon groupe - Seuls les parents exposent aria-expanded - Une seule stratégie de focus composite est utilisée - Focus et sélection restent distincts ## 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.
- Web platform
- 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 Vue arborescente sur un parcours réel
# Vérifier Vue arborescente après l’implémentation ## Objectif Audite l’implémentation de Vue arborescente 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:4c9eb7ac57ff3b66565750b6b3b3ffbe9234ce635e78c031d43e4f1e60545f73