angular / angular/components

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

Aperta
#14,861 19 commenti 19 reazioni 0 assegnatari Vedi su GitHub
area: material/table feature P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### 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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

La issue non indica file sorgente né test. Inizia riproducendo il comportamento con una mat-table contenente 10 righe, inclusa la selezione con il mouse e ArrowUp/ArrowDown, quindi esamina i punti di ingresso dell’interazione da tastiera della tabella. Il lavoro è completato quando la navigazione tra le righe funziona con i tasti freccia e il comportamento di tab e spazio è coerente, senza far scorrere la pagina in modo imprevisto.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.