[Mui-Drawer] When a temporary drawer is open, aria-hidden="true" is added to root DOM object causing accessibility verification errors

[sforehand]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Currently, when opening a temporary MUI drawer, an attribute of aria-hidden="true" is added to the root DOM object. This causes accessibility verification using the AXE tool to fail with the following error:

ARIA hidden element must not be focusable or contain focusable elements

You can test it on the MUI drawer page at: https://mui.com/material-ui/react-drawer/

The line in question is:

<div id="__next" data-reactroot="" aria-hidden="true">

It seems to be related to the modal. However, what should we do about this issue to maintain accessibility standards?

Expected behavior 🤔

No response

Steps to reproduce 🕹

Steps:

1. Go to https://mui.com/material-ui/react-drawer/
2. Find the temporary drawer example and click one of the buttons to open the temporary drawer.
3. Execute the AXE accessibility tool.
4. Observe the error.

Context 🔦

No response

Your environment 🌎

No response

[mnajdova]

The goal of adding this aria-hidden is to indicate that the page is not interactive until the drawer is opened. Isn't this improving the a11y experience?

[sforehand]

I think the issue here is AXE states that because there are focusable elements within the DOM tree of the hidden object, it could be an issue. I tend to agree with you regarding the aria-hidden attribute should be sufficient but am concerned that there might be an issue here.

[sforehand]

@mnajdova I think the issue here is the parent receives a aria-hidden but the drawer is child of the div so it presents as a problem.

[mnajdova]

@sforehand they are siblings -

[seanjermey]

I was having the same issue, a quick fix is to use variant permanent or persistent instead of temporary

[mnajdova]

I think the issue here is the parent receives a aria-hidden but the drawer is child of the div so it presents as a problem.

See in https://github.com/mui/material-ui/issues/33245#issuecomment-1196768921, this is not correct, so I don't understand what the problem is at all. @seanjermey can you maybe share more info?

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.