Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
#32,892 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
angular, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia dalla riproduzione StackBlitz collegata e dal relativo punto di ingresso main.ts, quindi segui l’overlay mat-menu e il comportamento del focus nel codice sorgente dei componenti Angular. Conferma la riproduzione con uno screen reader e usa il percorso di navigazione all’indietro previsto come criterio di completamento: il focus torna al Menu button di origine e lo sfondo è inaccessibile mentre il menu è aperto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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:

  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
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 1h
PR unite (30g)
84

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/components

Tutte le issue di angular/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.