implementation
Construis Visionneuse modale sans casser son comportement
# Implémenter Visionneuse modale dans ton agent ## Objectif Implémente Visionneuse modale pour ce comportement vérifié : Une visionneuse modale qui agrandit un média et peut permettre de parcourir une collection 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 que Visionneuse modale répond au besoin avant de coder. ## Comportement requis - Tant que la surface est modale, le focus clavier y reste jusqu’à sa fermeture. - Les contrôles précédent et suivant parcourent la collection sans quitter la visionneuse. - Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent. ## États à couvrir - Vue galerie - Média agrandi ## Accessibilité - Rôle ARIA : dialog[aria-modal=true] - Le contrôle principal ou la région nommée pour Visionneuse 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 place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d’origine. - Le contrôle fermer nommé et Échap ferment toujours ; l’appui extérieur est facultatif et jamais le seul moyen. - Le titre de la visionneuse, la position du média, la légende, le texte alternatif et les échecs de chargement sont disponibles pour la technologie d’assistance. - Tab atteint les contrôles de la visionneuse - Gauche et Droite parcourent les médias lorsque prévu - Échap ferme la visionneuse ## Quand ne pas utiliser - Les médias doivent être comparés côte à côte - Le contenu est un formulaire ou une décision sensible ## Critères d’acceptation - Le média sélectionné et sa légende sont clairement identifiés - Le clavier atteint la navigation et la fermeture - Le focus revient à la miniature d’origine - Les erreurs de chargement et de média ont une alternative textuelle ## 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 Visionneuse modale sur un parcours réel
# Vérifier Visionneuse modale après l’implémentation ## Objectif Audite l’implémentation de Visionneuse 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:5b030add94dfd47ed0986d7a4a179ca1b78d944d935d2e4da1b8fe3e9b48315d