Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y] WAVE error on Dialog and other primitives (Broken Aria Reference: aria-labelledby)? #2836

Open
gustaveWPM opened this issue Apr 12, 2024 · 1 comment

Comments

@gustaveWPM
Copy link

gustaveWPM commented Apr 12, 2024

Note

As I'm using Shadcn/ui, maybe the root cause of this is NOT Radix UI.

Question

Hello.
I have noticed an error with WAVE plugin: https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?pli=1

When I open a dialog and then inspect the page with WAVE, I got the following error message:

Broken ARIA reference
An aria-labelledby or aria-describedby referenceexists, but the target for the reference does not exist.

I think it comes from this:

<div role="dialog" id="radix-:Rmlt6ukq:" aria-describedby="radix-:Rmlt6ukqH2:" aria-labelledby="radix-:Rmlt6ukqH1:" data-state="open" ... />

Is this issue already known, or would it be appreciated to investigate furthermore?


Update: Select seems to be concerned too.

@gustaveWPM gustaveWPM changed the title [a11y] WAVE error on Dialog (Broken Aria Reference: aria-labelledby)? [a11y] WAVE error on Dialog and other primitives (Broken Aria Reference: aria-labelledby)? Apr 12, 2024
@febeling
Copy link

I have a problem where the label and select aren't linked - the (hidden, native) select lacks the id attribute. (@radix-ui/react-select@2.0.0)

Chrome devtools show that under "Issues" as "Incorrect use of ".

Sounds related.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants