angular / angular/components

mat-table does not accept keyboard up/down keys to navigate among rows

Offen
#14,861 19 Kommentare 19 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/table feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### What is the expected behavior?
When mat-table is rendered, the user should be able to navigate the table rows using up/down keys of the keyboard.

#### What is the current behavior?
When mat-table is rendered, the user cannot navigate the table rows using up/down keys of the keyboard. The up/down arrow keys scrolls the page instead.
Behavior of tab key and space key is also inconsistent in context of the mat-table

#### What are the steps to reproduce?
1. Create a mat-table with 10 rows of data.
2. Select row 3 using mouse
3. Use down arrow key to navigate to the next row.
---> Row selection remains on the mouse-selected row itself
4. Use up arrow key to navigate to the previous row.
---> Row selection remains on the mouse-selected row itself

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular-devkit/architect 0.12.1
@angular-devkit/build-angular 0.12.1
@angular-devkit/build-optimizer 0.12.1
@angular-devkit/build-webpack 0.12.1
@angular-devkit/core 7.2.1
@angular-devkit/schematics 7.2.1
@angular/cdk 7.2.1
@angular/cli 7.2.1
@angular/material 7.2.1
@ngtools/webpack 7.2.1
@schematics/angular 7.2.1
@schematics/update 0.12.1
rxjs 6.3.3
typescript 3.2.2
webpack 4.23.1

Google Chrome Version 71.0.3578.98 (Official Build) (64-bit)
Firefox 64.0.2 (64-bit)

#### Is there anything else we should know?
The issue is a blocker for accessibility and keyboard navigable table rows. A similar issue was reported here (https://github.com/angular/material/issues/11523) but closed in the context of not being able to report it in the right forum. Not sure if this is already reported somewhere else in context to Angular/Material 7.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Das Issue nennt keine Quelldateien oder Tests. Beginne damit, das Verhalten mit einer mat-table mit 10 Zeilen zu reproduzieren, einschließlich der Mausauswahl und ArrowUp/ArrowDown, und untersuche anschließend die Einstiegspunkte für die Tastaturinteraktion der Tabelle. Als erledigt gilt die Aufgabe, wenn die Zeilennavigation mit den Pfeiltasten funktioniert und sich das Verhalten von Tab und Leertaste konsistent verhält, ohne dass die Seite unerwartet scrollt.

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
35/100

Neue Issues direkt in Ihr Postfach

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