implementation
Construis Fenêtre contextuelle sans casser son comportement
# Implémenter Fenêtre contextuelle dans ton agent ## Objectif Implémente Fenêtre contextuelle pour ce comportement vérifié : Une petite surface contextuelle ouverte volontairement pour afficher du contenu ou des contrôles sans rendre toute la page modale. ## 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 Fenêtre contextuelle répond au besoin avant de coder. ## Comportement requis - Activer le déclencheur ouvre la surface, puis peut la refermer au second appui. - Un appui hors de la surface non critique la ferme sans valider d’action. - Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent. ## États à couvrir - Popover fermé - Popover ouvert ## Accessibilité - Rôle ARIA : dialog - Le contrôle principal ou la région nommée pour Fenêtre contextuelle 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 déclencheur pour un contenu simple ou va de façon prévisible vers le premier contrôle pertinent. - Échap, le contrôle de fermeture ou un appui extérieur sans risque la ferme et restaure le focus sur le déclencheur. - Le déclencheur expose l’état développé et référence la surface ; un dialogue nommé est annoncé lorsque ce pattern est utilisé. - Entrée ou Espace ouvre depuis le déclencheur - Tab parcourt le contenu interactif - Échap ferme la fenêtre contextuelle ## Quand ne pas utiliser - La tâche nécessite un flux large ou modal - La surface n’est qu’une courte aide passive ## Critères d’acceptation - Le panneau s’ouvre seulement après une activation volontaire - Le contenu interactif suit un ordre de focus logique - Échap et le contrôle de fermeture restaurent le focus - L’arrière-plan reste utilisable car le panneau n’est pas modal ## 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-popover
- 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 Fenêtre contextuelle sur un parcours réel
# Vérifier Fenêtre contextuelle après l’implémentation ## Objectif Audite l’implémentation de Fenêtre contextuelle 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:a9b82299cd90bf6b0e165c97b87aac79c511317634485ee7b5076a8c9ee66b9b