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.

[shifatul-i]

+1

[aeslinger0]

@ymdelgado2332 wouldn't that fix the error but still break accessibility? The focus should be returned to the original element once the dialog is closed, otherwise a mouse-less user might have to tab down all the way from the top.

I'm trying to play around with the delayFocusTrap or autoFocus properties to see if those help, but I can't seem to reproduce it consistently.

[kkys4bfgp75be9p]

same error exists on 19 version:

[VOSolyanik]

We have a similar issue. fixed it by adding MAT_DIALOG_DEFAULT_OPTIONS.

{
  provide: MAT_DIALOG_DEFAULT_OPTIONS,
  useValue: { autoFocus: 'dialog', restoreFocus: true }
}

[tenji73]

nice solution! thanks!

[krisBerserker]

had the same issue with vueJs3 and primevue.
Changed ''to'' parameter with ''url'' in the definitions of items collection and add in the template:
items: [
{ label: 'Accueil', icon: 'pi pi-fw pi-home inert', to: '/' },
{ label: 'Évènements', icon: 'pi pi-fw pi-calendar', to: '/evenements' },
{ label: 'Statistique', icon: 'pi pi-fw pi-chart-bar', to: '/statistique' },
{ label: 'Login', icon: 'pi pi-fw pi-sign-in', to: '/login' }
]
changed into :
items: [
{ label: 'Accueil', icon: 'pi pi-fw pi-home inert', url: '/' },
{ label: 'Évènements', icon: 'pi pi-fw pi-calendar', url: '/evenements' },
{ label: 'Statistique', icon: 'pi pi-fw pi-chart-bar', url: '/statistique' },
{ label: 'Login', icon: 'pi pi-fw pi-sign-in', url: '/login' }
]

[grepsoft]

This issue is related to accessibility. To resolve this, you can use the inert attribute instead of aria-hidden, which will also prevent focus.

inert should be true with dialog is show otherwise false.

[marc-wilson]

We have a similar issue. fixed it by adding MAT_DIALOG_DEFAULT_OPTIONS.

{
  provide: MAT_DIALOG_DEFAULT_OPTIONS,
  useValue: { autoFocus: 'dialog', restoreFocus: true }
}

seems like the most "correct" way to do it. not working for me though... tried a few different variations of the config. but nothing.

[ChrisJohnNewton]

This issue is related to accessibility. To resolve this, you can use the inert attribute instead of aria-hidden, which will also prevent focus.

inert should be true with dialog is show otherwise false.

Yes this seems like the solution - hopefully the Angular Material team will look into it

[kvandana451]

{
provide: MAT_DIALOG_DEFAULT_OPTIONS,
useValue: { autoFocus: 'dialog', restoreFocus: true }
} Somehow this works but @ChrisJohnNewton where can we add the inert attribute to the root?

[q100va]

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.

Thank you for link! I used @asgarov1's solution with a custom directive.