PreviewTrigger: the preview dialog has no accessible name

Aperta Adatta ai principianti
  • Qualcosa non va?
#10,917 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@therealemmanueloppong ci sta già lavorando.

Dal 5/11/2026.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
76/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia da usePreviewTrigger, dove l’issue dice che vengono assemblate popoverProps, e confronta il comportamento delle etichette con useDialog. Controlla i test esistenti per PreviewTrigger e per l’accessibilità della finestra di dialogo. Il lavoro è completato quando la finestra di dialogo di anteprima riceve per impostazione predefinita l’id del suo trigger come aria-labelledby, mentre le props esplicite aria-label o aria-labelledby hanno la precedenza, e i test coprono questo comportamento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
16k
Fork
1.6k
Merge medio
3g 23h
PR unite (30g)
43

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di adobe/react-spectrum

Tutte le issue di adobe/react-spectrum

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.