[Accessibility] Overlay DOM position breaks screen reader focus order for mat-menu
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- angular, typescript
调研方向
从链接的 StackBlitz 复现和其中的 main.ts 入口点开始，然后在 Angular 组件源代码中跟踪 mat-menu overlay 和焦点行为。使用屏幕阅读器确认该复现，并将预期的后退导航路径作为完成标准：菜单打开时，焦点返回到起始的 Menu button，且背景不可访问。
由索引模型根据 Issue 内容生成。
描述
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:
- Click "Menu". The screen reader focus is moved to Item 1.
- Navigate back (ctrl+option+left). This moves to the menu itself (no problem there).
- 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
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 7 小时
- 30 天内合并 PR
- 92
环境准备
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
angular/components 的其他 Issue
-
area: material/datepicker P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33763 · 2 条评论 · 3 个 reaction ·
维护者通常 1 天内回复
-
area: material/table P4
难度 1/5 1 小时以内 新手友好度 88/100
angular/components#33709 · 1 条评论 ·
维护者通常 1 天内回复
-
area: material/table docs gemini-triaged P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33455 ·
维护者通常 1 天内回复
-
area: material/core gemini-triaged P3
难度 1/5 1 小时以内 新手友好度 78/100
angular/components#33059 · 2 条评论 ·
维护者通常 1 天内回复
-
area: material/dialog P2
难度 2/5 1-3 小时 新手友好度 64/100
angular/components#30536 · 3 个 reaction ·
维护者通常 1 天内回复
查看 angular/components 的全部 Issue
相似的 Issue
-
ADD openalgo未关闭template
难度 2/5 1-3 小时 新手友好度 75/100
维护者通常 1 天内回复
-
factory-active factory-automatic task-bug-reproduction-success task-identify-harness-labels-done task-identify-issue-type-done
难度 2/5 1-3 小时 新手友好度 90/100
维护者通常 1 天内回复
-
bug Needs: Triage :mag:
难度 2/5 1-3 小时 新手友好度 84/100
microsoft/fluentui-contrib#671 ·
-
难度 2/5 1-3 小时 新手友好度 88/100
sveltejs/acorn-typescript#150 ·
-
难度 2/5 1-3 小时 新手友好度 78/100