mat-table does not accept keyboard up/down keys to navigate among rows
- 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