[Backdrop] Adds audio feedback for backdrop state change for assistive tech

[michellexliu]

Resolves #31371

• Adds screen reader announcement that a backdrop has been opened using aria-live attributes
• Fixes Level A WCAG failure of 4.1.2: Name, Role, Value.

backdrop-demo.mov

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-37202--material-ui.netlify.app/

@material-ui/core: parsed: +0.09% , gzip: +0.12%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 19f9e9b

[mj12albert]

@michellexliu Thanks for working on this!

There is a useForkRef utility for handling the ref in these cases:

import useForkRef from '../utils/useForkRef';

const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
  const backdropRef = React.useRef(null);

  const handleRef = useForkRef(backdropRef, ref);

  return (
   <TransitionComponent {/* etc */}>
     <BackdropRoot ref={handleRef}>
       {/* ... */}
     </BackdropRoot>
   </TransitionComponent>
  )
})

(An example https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Chip/Chip.js#L347-L348)

[ZeeshanTamboli]

I checked on NVDA version 2023.1 and I am not getting any announcements in https://deploy-preview-37202--material-ui.netlify.app/material-ui/react-backdrop/#example. Or am I missing something here?

[ZeeshanTamboli]

Since there is no reply and updates from the author, I am closing it.