[Accessibility] Overlay DOM position breaks screen reader focus order for mat-menu

オープン

#32,892 2026年3月5日に作成コメント 1 件リアクション 0 件担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度: 4/5
見積もり時間: 3〜5日
初心者へのやさしさ: 45/100

issue の種類: バグ
明瞭さ: おおむね明確
活発さ: 静か
技術スタック: angular, typescript
領域: accessibility, frontend

調査の方向性

リンクされた StackBlitz の再現手順とその main.ts エントリポイントから始め、Angular コンポーネントのソースで mat-menu のオーバーレイとフォーカスの動作を追跡します。スクリーンリーダーで再現を確認し、期待される後方ナビゲーションの経路を完了条件として使用します。メニューが開いている間、フォーカスが元の Menu button に戻り、背景にアクセスできないことが条件です。

索引モデルが issue の本文から書いたものです。

説明

Accessibility area: material/menu P3

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日 1時間
マージ済み PR（30日）: 84

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
リポジトリをフォークし、ブランチを切って変更します。
issue 番号を参照したプルリクエストを送ります。

angular/components のほかの issue

docs-bug(tree): Test classes and interfaces do not render オープン

area: material/tree docs gemini-triaged needs triage

難易度 2/5 1〜3時間初心者へのやさしさ 68/100

angular/components#33832 · 2026年9月17日に作成
bug(mat-date-picker): month shown twice in date picker オープン

area: material/datepicker gemini-triaged P4

難易度 2/5 1〜3時間初心者へのやさしさ 72/100

angular/components#33763 · コメント 2 件 · リアクション 3 件 · 2026年9月2日に作成
Bug in table.scss footer cell height: unset instead of footer row height unset オープン

area: material/table gemini-triaged P4

難易度 1/5 1時間未満初心者へのやさしさ 88/100

angular/components#33709 · コメント 1 件 · 2026年8月21日に作成
docs-bug(Table): Add example with `rowspan` オープン

area: material/table docs gemini-triaged P4

難易度 2/5 1〜3時間初心者へのやさしさ 72/100

angular/components#33455 · 2026年6月27日に作成
bug(date-adapter): Misleading JSDoc for createDate returns type オープン

area: material/core gemini-triaged P3

難易度 1/5 1時間未満初心者へのやさしさ 78/100

angular/components#33059 · コメント 2 件 · 2026年4月9日に作成

angular/components の issue をすべて見る

似ている issue

sortNodePosition throws when a sibling in enteringChildren has not mounted yet (Firefox: compareDocumentPosition: Argument 1 is not an object) オープン

難易度 1/5 1〜3時間初心者へのやさしさ 88/100

motiondivision/motion#3849 · 2026年9月25日に作成
Add: S Play Event HD オープン

check:passed streams:add

難易度 2/5 1〜3時間初心者へのやさしさ 72/100

iptv-org/iptv#52752 · 2026年9月25日に作成
Improvement for contact popover オープン

難易度 2/5 1〜3時間初心者へのやさしさ 68/100

linagora/twake-ui#111 · 2026年9月25日に作成
LiteLLM proxy response_cost (x-litellm-response-cost) is never applied to ChatModelOutput.cost オープン

bug

難易度 2/5 1〜3時間初心者へのやさしさ 84/100

i-am-bee/beeai-framework#1697 · リアクション 1 件 · 2026年9月25日に作成
Support bun dedupe オープン

enhancement

難易度 2/5 1〜3時間初心者へのやさしさ 75/100

antfu/node-modules-inspector#214 · 2026年9月25日に作成

TypeScript の issue をもっと見る