implementation
Construis Boîte de dialogue modale sans casser son comportement
# Implémenter Boîte de dialogue modale dans ton agent ## Objectif Implémente Boîte de dialogue modale pour ce comportement vérifié : Une surface ciblée pour une tâche délimitée qui rend le reste de la page temporairement inactif. ## 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 Boîte de dialogue modale répond au besoin avant de coder. ## Comportement requis - Tant que la surface est modale, le focus clavier y reste jusqu’à sa fermeture. - Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent. ## États à couvrir - Dialogue fermé - Dialogue ouvert ## Accessibilité - Rôle ARIA : dialog[aria-modal=true] - Le contrôle principal ou la région nommée pour Boîte de dialogue modale 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. - L’ouverture déplace le focus à l’intérieur, Tab n’atteint pas la page inerte et la fermeture restaure le focus sur le déclencheur logique. - Annuler, le contrôle de fermeture nommé et Échap ferment sans enregistrer ; l’appui extérieur n’est permis que si une perte accidentelle est sans conséquence. - La technologie d’assistance reçoit le rôle dialogue, le titre accessible, la description et les mises à jour de validation. - Tab et Maj+Tab circulent dans le dialogue - Échap ferme lorsque l’annulation est sûre - Entrée envoie seulement depuis le contrôle prévu ## Quand ne pas utiliser - Le parcours est assez long pour mériter sa propre page - L’information peut rester non modale et contextuelle ## Critères d’acceptation - La page derrière le dialogue est inerte - Le dialogue possède un titre et une description accessibles - Le focus est contenu puis restauré - Chaque fermeture traite le travail non enregistré sans risque ## 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-dialog
- 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 Boîte de dialogue modale sur un parcours réel
# Vérifier Boîte de dialogue modale après l’implémentation ## Objectif Audite l’implémentation de Boîte de dialogue modale 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:f8bce9762c70faa0366711577f0b883c4ad7362cf88f9034cf6ec4c8d093b19c