angular
bug(MatDialog): Blocked aria-hidden on an element because its descendant retained focus
Is this a regression?
- [x] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
Angular: 18.2
Description
This is a follow up of https://github.com/angular/components/issues/30187
That fix works, but not for dialogs in a tree view
const ok = await firstValueFrom( this.matDialog.open(AddNodeDialogComponent, { data, maxHeight: '90vh', width: '650px', autoFocus: 'first-heading', restoreFocus: true }).afterClosed(), );
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: <mat-tree-node.mat-tree-node cdk-tree-node cdk-drag name-avg_p1 type-group ng-star-inserted mat-tree-node-selected>
Ancestor with aria-hidden:
Reproduction
StackBlitz link: Steps to reproduce:
- https://stackblitz.com/edit/rwbw9hex?file=src%2Fexample%2Ftree-dynamic-example.ts
- Click on the + icon to open a dialog. The focus stays on the background
Expected Behavior
Add focus to the dialog and don't show warning message
Actual Behavior
Unable to set focus to dialog
Environment
@angular-devkit/architect 0.2001.6 @angular-devkit/core 20.2.2 @angular-devkit/schematics 20.2.2 @schematics/angular 20.1.6
Chrome 140 Windows
@crisbeto are you sure this is a duplicate? Because in my stackblitz example it is not possible to get focus to the dialog so tabs are not working correctly
FYI, same thing is happening on programmatic change of tab in mat-tab-group: setup a button to change tab with selectedIndex, warning Blocked aria-hidden... shows up
Reproduction: https://vtrmsett.stackblitz.io
