Lightbox
Visionneuse modale
Une visionneuse modale qui agrandit un média et peut permettre de parcourir une collection associée.
Avec vos mots
Ce que les gens décrivent
Alias documentés : visionneuse d'image, lecteur de média, galerie modale
- ouvrir cette photo en grand au-dessus de la page
- voir les images de la galerie sans quitter la page
- une superposition complète pour une image produit
- cliquer sur une miniature pour examiner la photo
- des photos précédente et suivante dans une fenêtre
- agrandir une image avec légende et bouton fermer
Essayer
Surfaces modales
Comparer les trois comportements
Scénario comparatif partagé : Un élément de projet ouvre une surface ciblée tandis que l'espace sous-jacent reste indisponible jusqu'à ce que l'utilisateur termine ou ferme cette surface.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Visionneuse modale
Lightbox est une composition modale dédiée aux médias ; une Boîte de dialogue modale traite les tâches et un Dialogue d'alerte traite une décision sensible.
Votre mission
Ouvrir la deuxième image, passer à la suivante au clavier, puis fermer et revenir sur la même miniature.
Cas limite à vérifier
Un échec de chargement conserve la légende et la navigation, explique l'erreur par du texte et ne laisse jamais une modale vide.
Mission
Visionneuse d'images - Lightbox
Ouvrir la deuxième image, passer à la suivante au clavier, puis fermer et revenir sur la même miniature.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Voile de fond
La couche qui sépare une surface modale du contenu de page inactif.
À utiliser quand
- Examiner des photos produit en grand
- Parcourir une petite collection d'images liées
À éviter quand
- Les médias doivent être comparés côte à côte
- Le contenu est un formulaire ou une décision sensible
Comparer les concepts proches
Utiliser une Boîte de dialogue modale pour une tâche générale délimitée ; choisir Alert dialog pour une décision courte et sensible, et Lightbox lorsque la consultation d'un média est la tâche.
Boîte de dialogue modaleUn Dialogue d'alerte sert à une décision courte et sensible, pas à un formulaire général ni à une visionneuse de média.
Dialogue d'alerteBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Contenir le focus
Tant que la surface est modale, le focus clavier y reste jusqu'à sa fermeture.
Parcourir les médias
Les contrôles précédent et suivant parcourent la collection sans quitter la visionneuse.
Fermer avec Échap
Échap ferme la surface temporaire et renvoie le focus vers un contrôle pertinent.
États
Vue galerie
Vue galerie
Média agrandi
Média agrandi
Transitions d’état
Vue galerie → Média agrandi
Une miniature est activée et son média s’ouvre avec sa légende et son contexte de navigation.
Média agrandi → Vue galerie
Fermer ou Échap ferme la visionneuse et rend le focus à la miniature d’origine.
Scénarios de test
- Contexte
- Une galerie produit contient quatre photos détaillées avec textes alternatifs pertinents et légendes.
- Mission
- Ouvrir la deuxième image, passer à la suivante au clavier, puis fermer et revenir sur la même miniature.
- État principal
- La photo sélectionnée est agrandie avec sa légende, sa position dans l'ensemble et les contrôles de navigation.
- Cas limite
- Un échec de chargement conserve la légende et la navigation, explique l'erreur par du texte et ne laisse jamais une modale vide.
Accessibilité
- Role
- dialog with aria-modal=true containing figure content
- Nom accessible
- Le contrôle principal ou la région nommée 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.
- Focus
- L'ouverture place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d'origine.
- Fermeture
- Le contrôle fermer nommé et Échap ferment toujours ; l'appui extérieur est facultatif et jamais le seul moyen.
- Scroll
- Le défilement de l'arrière-plan est verrouillé pendant l'ouverture. Le contenu débordant défile dans la surface et le contrôle actif reste visible.
- Annonce
- 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.
- Clavier
- Tab atteint les contrôles de la visionneuse
- Gauche et Droite parcourent les médias lorsque prévu
- Échap ferme la visionneuse
Bindings
Dialog.Root
- implementationKind
- shadcn-radix
- nativeElement
- Non applicable
- ariaPattern
- dialog with figure viewer
- radixPrimitive
- Dialog
- shadcnRecipe
- Dialog with figure viewer
- runtimeDependency
- @radix-ui/react-dialog@1.1.19
- packageName
- @radix-ui/react-dialog
- exportName
- Dialog.Root
- exactVersion
- 1.1.19
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Dialog supplies modal containment only; media navigation, captioning, loading, zoom, and gesture behavior are an explicit composition.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Dialog Modal Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Lightbox: modal dialog labeling, initial focus, focus containment, Escape dismissal, and focus return guidance.
- Radix Primitives: Dialog
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Lightbox: documented Radix Dialog parts, modal focus management, portals, overlay, and dismissal hooks.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.