PreviewTrigger: the preview dialog has no accessible name

Abierto Apto para principiantes
  • ¿Algo no está bien?
#10,917 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@therealemmanueloppong ya está trabajando en esto.

Desde el 5/11/2026.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

Empieza en usePreviewTrigger, donde el issue indica que se ensamblan popoverProps, y compara su comportamiento de etiquetado con useDialog. Revisa las pruebas existentes de PreviewTrigger y de accesibilidad del diálogo. Se considera terminado cuando el diálogo de vista previa recibe de forma predeterminada el id de su activador como aria-labelledby, mientras que las props explícitas aria-label o aria-labelledby tienen prioridad, y las pruebas cubren este comportamiento.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

accessibility bug PreviewTrigger
Provide a general summary of the issue here

The popover of a PreviewTrigger renders role="dialog" with no accessible name. axe reports aria-dialog-name (serious).

🤔 Expected Behavior?

The preview dialog is named by its trigger, as a Dialog inside a DialogTrigger is: aria-labelledby points to the trigger's id when the app gives no aria-label or aria-labelledby.

😯 Current Behavior
  • Popover sets role="dialog" when trigger === 'PreviewTrigger'. It takes its name only from its own aria-label and aria-labelledby props.
  • usePreviewTrigger returns popoverProps with id, onFocusWithin and onBlurWithin: no aria-labelledby.
  • A screen reader that moves into the preview hears an unnamed dialog.
💁 Possible Solution

In usePreviewTrigger, give the trigger an id and return 'aria-labelledby': triggerId in popoverProps, overridden by an aria-label or aria-labelledby passed to the Popover. This is what useDialog does with the DialogTrigger id.

🔦 Context

We wrap PreviewTrigger as a hover card in a design system. Until then, our hover card makes aria-label required.

🖥️ Steps to Reproduce
  1. Render <PreviewTrigger><Link href="/item">Item</Link><Popover><p>Summary</p></Popover></PreviewTrigger>.
  2. Focus the link and wait for the preview.
  3. Run axe, or inspect the popover: role="dialog", no aria-label, no aria-labelledby.
Version

react-aria-components 1.22.1

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

macOS

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
3 d 19 h
PR fusionados (30 d)
46

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.