bug(MatDialog): Blocked aria-hidden on an element because its descendant retained focus
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
リンクされている StackBlitz の再現から始め、特に src/example/tree-dynamic-example.ts を確認し、mat-tree のトリガーでの MatDialog のフォーカス動作を追跡します。ダイアログが開くときに autoFocus と restoreFocus がどのように相互作用するかを確認します。aria-hidden の警告を出さずにフォーカスがダイアログ内へ移動し、ツリーの操作も引き続き機能すれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100