mat-table does not accept keyboard up/down keys to navigate among rows
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### 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.
Contributor guide
Research direction
The issue names no source files or tests. Start by reproducing the behavior with a mat-table containing 10 rows, including mouse selection and ArrowUp/ArrowDown, then inspect the table's keyboard interaction entry points. Done means row navigation works with the arrow keys and the tab and space behavior is consistent without scrolling the page unexpectedly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100