angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.72k forks source link

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

Open ehayn-sei opened 4 weeks ago

ehayn-sei commented 4 weeks ago

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

crisbeto commented 3 weeks ago

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 commented 1 week ago

Helloo! can i be assigned this task :)