search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.81k stars 821 forks source link

Menu trigger's aria-controls creates invalid html #3013

Open DaveZIvy opened 3 months ago

DaveZIvy commented 3 months ago

Bug report

Current Behavior

When using the menu trigger it creates aria-controls=[id of dropdown] but the dropdown doesn't exist on the page, so it comes up as invalid html, "Error: The aria-controls attribute must point to an element in the same document."

Expected behavior

The aria-controls should reference an element in the DOM.

Reproducible example

https://codesandbox.io/p/sandbox/crimson-cache-5x9z2d?

Suggested solution

I'm not sure, maybe just hiding the dropdown with css instead of removing it from the DOM?

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-accordion latest
Radix Package(s) @radix-ui/react-icons latest
Radix Package(s) @radix-ui/react-navigation-menu latest
React react latest
React react -dom latest
Browser Chrome latest
Node n/a v20.15.0
npm/yarn npm 10.7.0
Operating System mac 14.5
Jacksonmills commented 1 month ago

Also getting this with IBM Accessibility checker, it's odd because things like Tabs properly hide/show these things... unsure as well of a solution here, also in test noticed tooltip/maybe popover might also suffer from this error

alex-kim-dev commented 4 weeks ago

Same for Dialog. I'm not sure if aria-controls is required, because the aria design pattern page for a dialog doesn't mention it https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

Jacksonmills commented 5 days ago

Same for Dialog. I'm not sure if aria-controls is required, because the aria design pattern page for a dialog doesn't mention it https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

Upon further investigation, I've confirmed that the aria-controls attribute is optional and is only required in specific scenarios. According to the W3C's proposed rule, aria-controls is mandatory only when:

In other contexts, the use of aria-controls is not obligatory. Therefore, if accessibility checkers, such as IBM's, flag the absence of aria-controls as an error outside these specific cases, it may be a false positive. Moving forward, I'll consider these flags as non-critical and address them based on the specific context of each element.

Reference: