Dialog and Menu like overlay component's accessibility is broken when used in Shadow DOM

[harunurhan]

Bug report

Current Behavior

Overlay components hides everything (sets aria-hidden="true") on mount, when they are used in Shadow DOM, so this makes part of the UI like dropdown menu content hidden in accessibility tree when the dropdown is open :(

See the underlying issue: https://github.com/theKashey/aria-hidden/issues/14, just opening the issue on here too since this project more actively maintained, you might want to fix this before aria-hidden does.

Expected behavior

Overlay content should never be aria-hidden.

Reproducible example

CodeSandbox Template

Suggested solution

We could try to pass element.getRootNode() to hideOthers(element, element.getRootNode() instanceof ShadowRoot ? element.getRootNode() : element.ownerDocument.body) for now.

But that's still not the ideal solution probably because everything else outside of the Shadow DOM will be visible :(

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System