[material-ui][Backdrop] Add aria-hidden by default

[chapmanm3]

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

This PR aims to solve Issue 33146 In which having the aria-hidden value on all Backdrops is no longer indented and instead it should only exist on the Backdrop that is behind a Modal. This is achieved by passing the aria-hidden: true value to the Modal's custom Backdrop component.

Fixes #33146

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 1ab855a

[mnajdova]

Suggested change

'aria-hidden': true,

You need to add this where ModalBackdrop is used, what you are doing here doesn't make sense as the API is not supported.

[chapmanm3]

This should be updated to use the new suggested format now

[chapmanm3]

@mnajdova

[mnajdova]

Changes look good, but should we consider them breaking changes and hold off till v6? cc @michaldudak what do you think?

[michaldudak]

I suppose so. If an application relies on a Backdrop being excluded from the a11y tree, it may become much harder or impossible to navigate with screen readers after this change.
I'll add it to the v6 milestone.

[ZeeshanTamboli]

@DiegoAndai, should we consider including this fix in v6?

[DiegoAndai]

Thanks for the callout @ZeeshanTamboli!

I wonder if we should do it, considering :

• that the possible breaking change might affect navigation on the entire app: [material-ui][Backdrop] Add aria-hidden by default #34691 (comment)
• that there's a workaround by providing aria-hidden={false} to the Backdrop component
• that on the major after v6, we plan to build the components on top of Base UI, so I wouldn't want to release back-to-back Backdrop accessibility breaking changes.

What do you think?

@colmtuite @michaldudak, is there a plan to add a Backdrop component to Base UI alongside the Dialog? If so, would/should the Backdrop component have aria-hidden=true by default?

[colmtuite]

@DiegoAndai Our Dialog API design doc was just started this week and is still in early draft mode, so I can't be sure. Currently, there's no <Dialog.Backdrop /> component suggested in the doc.

However, I'm almost certain we will include a <Dialog.Backdrop /> component in the new Dialog, yes. Whether or not it has aria-hidden depends on whether or not <Dialog.Popup /> is inside the Backdrop or outside it. I'm less sure about that right now, but I would guess it will be rendered outside, with aria-hidden.

[ZeeshanTamboli]

that on the major after v6, we plan to build the components on top of Base UI, so I wouldn't want to release back-to-back Backdrop accessibility breaking changes.

What do you think?

I agree it would be better to take this into account when building it with the new Base UI (depending on what Base UI does).

[DiegoAndai]

I added this to the Material UI with Base UI milestone to keep coordination between both. We can keep it on hold, and revisit it when we do that refactor. I added a comment with the workaround to the issue.

[silviuaavram]

Closing it for #47798