[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.