We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
Developement/Production OS: Windows 10 19043.1110 Node version: 16.0.0 Package manager: pnpm@8.6.0 Radix Vue version: 1.0.0 Vue version: 3.0.0 Nuxt version: 3.0.0 Nuxt mode: universal Nuxt target: server CSS framework: tailwindcss@3.3.3 Client OS: Windows 10 19043.1110 Browser: Chrome 90.0.4430.212
https://www.radix-vue.com/components/popover.html
Inspect code of the popover:
<div trapfocus="false" disableoutsidepointerevents="false" id="radix-vue-popover-content-27" data-state="open" role="dialog" data-dismissable-layer="" tabindex="-1" class="..." data-side="bottom" data-align="center" style="..."> </div>
It has role="dialog" but is missing aria-label or aria-labelledby.
role="dialog"
aria-label
aria-labelledby
I could workaround this by using an unique ID as label: https://stackblitz.com/edit/zxrcsg.
Found the issue because the accessibility checks were not passing in Storybook. The rule is noted as "serious impact" in Axe: https://dequeuniversity.com/rules/axe/4.2/aria-dialog-name
Looks like Radix UI has the same issue: https://www.radix-ui.com/primitives/docs/components/popover
Also, the link in accessibility section is 404: https://www.radix-vue.com/components/popover.html#accessibility (goes to https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal)
The text was updated successfully, but these errors were encountered:
Yup seems like the issue from Radix UI. I'm thinking of the solution 1 suggested by the linked issue above. 😁
As a temporary workaround, you can always add aria-label attribute to PopoverContent
PopoverContent
Sorry, something went wrong.
No branches or pull requests
Environment
Link to minimal reproduction
https://www.radix-vue.com/components/popover.html
Steps to reproduce
Inspect code of the popover:
Describe the bug
It has
role="dialog"
but is missingaria-label
oraria-labelledby
.Expected behavior
I could workaround this by using an unique ID as label: https://stackblitz.com/edit/zxrcsg.
Context & Screenshots (if applicable)
Found the issue because the accessibility checks were not passing in Storybook. The rule is noted as "serious impact" in Axe: https://dequeuniversity.com/rules/axe/4.2/aria-dialog-name
Looks like Radix UI has the same issue: https://www.radix-ui.com/primitives/docs/components/popover
Also, the link in accessibility section is 404: https://www.radix-vue.com/components/popover.html#accessibility (goes to https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal)
The text was updated successfully, but these errors were encountered: