bug(COMPONENT): Blocked aria-hidden on an element because its descendant retained focus.

[tenji73]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Blocked aria-hidden on an element because its descendant retained focus. The 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.
Element with focus: button
Ancestor with aria-hidden: <material-docs-app ng-version=​"19.0.4" aria-hidden=​"true">​…​​flex...

also visible when trying the examples in chrome (Version 131.0.6778.109 (Official Build) (arm64))
https://material.angular.io/components/dialog/overview

happens when the dialog has a button...

Reproduction

examples on the material.angular.io:
https://material.angular.io/components/dialog/overview

Expected Behavior

no error

Actual Behavior

works, but shows an error in the console

Environment

• Angular: 18.2
• CDK/Material: 18
• Browser(s): chrome (Version 131.0.6778.109 (Official Build) (arm64))
• Operating System (e.g. Windows, macOS, Ubuntu): mac os

[ymdelgado2332]

I'm experiencing the same issue when using MatDialog in Angular Material version 16.2.14. The error I see in the browser console is:

"Blocked aria-hidden on an element because its descendant retained focus. The 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."

This happens when I open a dialog, and it seems related to how aria-hidden is applied to the background content while the dialog is active. From what I've researched, this issue appears to have been present since version 13 of Angular Material and still persists in the current version.

[ymdelgado2332]

I was able to resolve this issue using the solution provided in this StackOverflow thread.

Before opening the dialog, I added the following lines of code to ensure that the previously focused element (e.g., a button) loses focus:
const buttonElement = document.activeElement as HTMLElement; // Get the currently focused element
buttonElement.blur(); // Remove focus from the button

This prevents the error by ensuring that no focused element is hidden by the aria-hidden attribute when the dialog is opened. It worked perfectly for me! Let me know if it helps you too.