angular / angular/components

bug(MatTree): MatTree with interactive elements in each row is not keyboard accessible using a screenreader

Offen
#22,419 9 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: cdk/tree P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Reproduction

Use StackBlitz to reproduce your issue:
- Components: https://angular-p4bmmy-zxpv6j.stackblitz.io

Steps to reproduce:
1. Navigate to StackBlitz link above on a Windows machine
2. Use the keyboard to interact with the tree by tabbing to a node, pressing enter or space to expand it, then tabbing to a nested checkbox and selecting it. Do not use the mouse.
3. Enable JAWS or NVDA screen reader
4. Attempt to repeat step 2, using the keyboard to interact with the tree
5. Manually expand the tree using the mouse then tab through the elements until you get to a nested checkbox. Press space or enter to select the checkbox.

![image](https://user-images.githubusercontent.com/81990996/113909821-21101700-97a6-11eb-8031-6c4e615673e7.png)

#### Expected Behavior
Enabling a screen reader should not change the behavior when interacting with the tree using a keyboard. With a screen reader enabled, I should be able to expand a row, tab to a nested checkbox, and select the checkbox using only the keyboard.

#### Actual Behavior
Hitting space or enter appears to send the click event to the first encountered input element, rather than the focused element. In the linked example, this can be either the textbox above the tree or an unfocused checkbox, depending on how you tab through the list. Either way, the focused element doesn't seem to receive the event.

#### Environment

JAWS v2021.2102.34 / NVDA v2020.4 (reproducible with both)
Windows 10 Enterprise Version
Chrome Version 89.0.4389.114

Also tested with Firefox Version 87.0, but was not able to reproduce on FF

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit der verlinkten StackBlitz-Reproduktion und wiederholen Sie die Schritte ausschließlich mit der Tastatur in Chrome unter Windows mit JAWS oder NVDA. Vergleichen Sie das Verhalten mit und ohne Screenreader, einschließlich des verschachtelten Kontrollkästchens und des Textfelds über dem Baum. Als erledigt gilt die Aufgabe, wenn das fokussierte Element Enter oder Space empfängt und der Baum mit einem Screenreader weiterhin per Tastatur zugänglich bleibt, wobei das berichtete Firefox-Verhalten erhalten bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.