bug(MatDialog): Blocked aria-hidden error when hasBackdrop is false

[ehayn-arch]

trafficstars

Description

I am launching a dialog that has a MatDialogConfig property of hasBackdrop = false. Doing so seems to still attach a aria-hidden="true" property to DOM elements that are siblings to the cdk overlay container. This in turn seems to cause a console error of "Blocked aria-hidden on..." when interacting with DOM elements that live underneath one of those sibling elements while the dialog is open. The console error seems to be intermittent.

Reproduction

stackblitz link: https://stackblitz.com/edit/ue8xe5

1. launch dialog
2. while dialog is open click into the text box
3. console error should appear (can be intermittent)

Expected Behavior

I wouldn't expect the console error to occur

Actual Behavior

Console error occurs: Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

Environment

• Angular: 18.0.1
• CDK/Material: 18.1.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

The fix here is to set inert in addition to aria-hidden. I was trying something similar a while ago in #25666, but I wasn't able to land it. Things could have changed since then though.

[Amenawon]

Helloo! can i be assigned this task :)

[OihiSyfeddine]

Not the best option, but you can solve your problem by adding this code in your onInit() method in your modal

const elements = document.querySelectorAll('[aria-hidden]'); elements.forEach(element => { element.removeAttribute('aria-hidden'); });

[nam-glh]

Not the best option, but you can solve your problem by adding this code in your onInit() method in your modal

const elements = document.querySelectorAll('[aria-hidden]'); elements.forEach(element => { element.removeAttribute('aria-hidden'); });

this works.

[jhancd10]

Not the best option, but you can solve your problem by adding this code in your onInit() method in your modal

const elements = document.querySelectorAll('[aria-hidden]'); elements.forEach(element => { element.removeAttribute('aria-hidden'); });

This really works, thanks!!!!!