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

[chinanderm]

Is there any response from the radix team about this?

[theomessin]

Any update on this?

[avpeery]

Running into same issue, checking in to see if there is an update or plans to fix this accessibility bug?

[CodingDive]

Are there any known workarounds?

I see this warning in the browser, but don't know how to fix the accessibility inside the shadow DOM.

[guillaumegenthial]

Experiencing the same issue for Dialog and Dropdown inside a shadow DOM.

1. Getting the error log despite having a recent version of aria-hidden installed (1.2.4)
2. Unable to navigate with arrow keys in a dropdown menu

For info (if relevant): i use a the custom <Portal> functionality to specify a portal container within the shadow DOM so that the correct styles are applied.

[harunurhan]

Getting the error log despite having a recent version of aria-hidden installed (1.2.4)

@guillaumegenthial

Better to report this to https://github.com/theKashey/aria-hidden/issues/14

Are there any known workarounds?

@CodingDive

If enforcing newer version of aria-hidden library doesn't solve the problem, You can patch it locally using the diff below (using a version earlier than aria-hidden@v1.2.2) though it's far from an ideal solution.

         elementsToKeep.add(el);
-        keep(el.parentNode);
+        keep(el.parentNode || el.host);

[bagav1]

Are there any known workarounds?

I see this warning in the browser, but don't know how to fix the accessibility inside the shadow DOM.

...

I have the same problem. Any solution? I have not been able to come up with a solution and I have turned every component upside down to see if I can fix it, at least to stop throwing that error in the console.

[guillaumegenthial]

Thanks @harunurhan for the suggestion.

@bagav1 I ended up installing an earlier version with

pnpm add aria-hidden@v1.2.1

Which makes the error go away, though the arrow navigation seems broken (not sure how it is related though)