angular / angular/components

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

Offen
#31,927 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: material/dialog P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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:
Ancestor with aria-hidden: ​…​​

### Reproduction

StackBlitz link:
Steps to reproduce:
1. https://stackblitz.com/edit/rwbw9hex?file=src%2Fexample%2Ftree-dynamic-example.ts
2. 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion, insbesondere src/example/tree-dynamic-example.ts, und verfolge das MatDialog-Fokusverhalten mit dem mat-tree-Trigger. Prüfe, wie autoFocus und restoreFocus beim Öffnen des Dialogs zusammenspielen. Als erledigt gilt, wenn der Fokus in den Dialog wechselt, ohne die aria-hidden-Warnung, und die Interaktion mit dem Baum weiterhin funktioniert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.