bug(MatDialog): Blocked aria-hidden error when hasBackdrop is false
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Description
I am launching a dialog that has a MatDialogConfig property of hasBackdrop = false. Doing so seems to still attach a aria-hidden="true" property to DOM elements that are siblings to the cdk overlay container. This in turn seems to cause a console error of "Blocked aria-hidden on..." when interacting with DOM elements that live underneath one of those sibling elements while the dialog is open. The console error seems to be intermittent.
### Reproduction
stackblitz link: https://stackblitz.com/edit/ue8xe5
1. launch dialog
2. while dialog is open click into the text box
3. console error should appear (can be intermittent)
### Expected Behavior
I wouldn't expect the console error to occur
### Actual Behavior
Console error occurs:
Blocked aria-hidden on a element because the element that just received 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.
### Environment
- Angular: 18.0.1
- CDK/Material: 18.1.4
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
コントリビューションガイド
調査の方向性
Start with the linked StackBlitz reproduction and inspect MatDialogConfig.hasBackdrop=false while following the dialog's aria-hidden behavior. Reproduce the intermittent Chrome console error by focusing the text box while the dialog is open; done means the error no longer occurs and the expected focus behavior is preserved.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100