[material-ui][Backdrop] aria-hidden is set by default

[aaarichter]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When running the backdrop example with child components as shown on https://mui.com/material-ui/react-backdrop/#example, the backdrop div has aria-hidden="true" set. This is problematic IMO, esp when the child element is for example a loading spinner with the role progressbar.

Wouldn't aria-hidden="true" block screenreaders from announcing those child elements? On the other hand aria-hidden on the backdrop without any child elements makes sense.

Expected behavior 🤔

IMO backdrops with child elements should avoid aria-hidden="true"

Steps to reproduce 🕹

Steps:

1. open https://mui.com/material-ui/react-backdrop/#example
2. inspect backdrop with dev tool

Context 🔦

Using the backdrop with a loading (progressbar) indicator.

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 12.4 Binaries: Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 8.12.1 - ~/.nvm/versions/node/v16.14.2/bin/npm Browsers: Chrome: 102.0.5005.61 Edge: Not Found Firefox: 100.0.2 Safari: 15.5 npmPackages: @emotion/react: 11.9.0 => 11.9.0 @emotion/styled: 11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.82 @mui/icons-material: 5.8.0 => 5.8.0 @mui/lab: 5.0.0-alpha.83 => 5.0.0-alpha.83 @mui/material: 5.8.1 => 5.8.1 @mui/private-theming: 5.8.0 @mui/styled-engine: 5.8.0 @mui/system: 5.8.1 => 5.8.1 @mui/types: 7.1.3 @mui/utils: 5.8.0 @mui/x-date-pickers: 5.0.0-alpha.1 @types/react: 17.0.45 => 17.0.45 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 styled-components: 5.3.5 => 5.3.5 typescript: 4.6.4 => 4.6.4 ```

[michaldudak]

I think setting aria-hidden makes sense when the Backdrop is used with a Modal. Otherwise, it may not be necessary. I suppose we could remove the attribute and set it only in Modal.

cc @mnajdova, @siriwatknp

[tanishach03]

Can I work on this?

[michaldudak]

Sure, go ahead!

[DiegoAndai]

For anyone stumbling upon this issue before it's resolved, you can provide the prop aria-hidden={false} to the Backdrop component as a workaround.

[swax]

Just stumbled on this issue, seems that having aria-hidden={true} hides child elements from the accessibility tree. We would probably want to automatically set aria-hidden to the inverse of the open property.