[Accessibility] Overlay DOM position breaks screen reader focus order for mat-menu
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
This bug was reported previously (https://github.com/angular/components/issues/10302
) and it seems that there was a fix made for autocomplete and select (https://github.com/angular/components/issues/10302#issuecomment-3574921653) but the issue still exists for menu.
### Reproduction
StackBlitz link:
https://stackblitz.com/angular/qyybdrnxmyx?file=main.ts
Steps to reproduce:
1. Click "Menu". The screen reader focus is moved to Item 1.
2. Navigate back (ctrl+option+left). This moves to the menu itself (no problem there).
3. Navigate back again. This moves focus to "Current build: ...." instead of the original Menu button. On a larger page, this problem will be made worse by all the other elements in between.
### Expected Behavior
A focus-trap should be applied to the overlay, and the rest of the page should be inaccessible while the overlay is displayed, with or without a screen reader.
### Actual Behavior
If you shift focus backwards in a screen reader when a component like MatMenu creates an overlay, it brings you to the bottom of the page instead of to the flyout origin.
### Environment
- Angular: 19.2.10
- CDK/Material: 19.2.19
- Browser(s): Google Chrome Version 145.0.7632.117 (
- Operating System (e.g. Windows, macOS, Ubuntu): macOS Sequoia 15.6
コントリビューションガイド
調査の方向性
リンクされた StackBlitz の再現手順とその main.ts エントリポイントから始め、Angular コンポーネントのソースで mat-menu のオーバーレイとフォーカスの動作を追跡します。スクリーンリーダーで再現を確認し、期待される後方ナビゲーションの経路を完了条件として使用します。メニューが開いている間、フォーカスが元の Menu button に戻り、背景にアクセスできないことが条件です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- accessibility, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100