[Accessibility] Overlay DOM position breaks screen reader focus order for mat-menu
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Accessibilité débutants
- 45/100
- Type d'issue
- Bug
- Clarté
- Plutôt claire
- Activité
- Calme
- Stack technique
- angular, typescript
- Domaine
- accessibility, frontend
Piste de recherche
Commencez par la reproduction StackBlitz liée et son point d’entrée main.ts, puis suivez l’overlay mat-menu et le comportement du focus dans le code source des composants Angular. Confirmez la reproduction avec un lecteur d’écran et utilisez le parcours de navigation arrière attendu comme critère de fin : le focus revient au Menu button d’origine et l’arrière-plan est inaccessible tant que le menu est ouvert.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 1 h
- PR mergées (30 j)
- 84
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de angular/components
-
area: material/tree docs gemini-triaged needs triage
Difficulté 2/5 1-3 heures Accessibilité débutants 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
angular/components#33763 · 2 commentaires · 3 réactions ·
-
area: material/table gemini-triaged P4
Difficulté 1/5 Moins d'une heure Accessibilité débutants 88/100
angular/components#33709 · 1 commentaire ·
-
area: material/table docs gemini-triaged P4
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
Difficulté 1/5 Moins d'une heure Accessibilité débutants 78/100
angular/components#33059 · 2 commentaires ·
Toutes les issues de angular/components
Issues similaires
-
Difficulté 2/5 1-3 heures Accessibilité débutants 84/100
bcgov/bc-wallet-mobile#4761 · 1 commentaire ·
-
external-issue to-triage
Difficulté 2/5 1-3 heures Accessibilité débutants 88/100
-
area-deployment area-integrations triage:bot-seen
Difficulté 2/5 Une demi-journée Accessibilité débutants 86/100
-
Difficulté 2/5 1-3 heures Accessibilité débutants 82/100
-
refactor
Difficulté 2/5 1-3 heures Accessibilité débutants 84/100