angular / angular/components

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

Open
#14,861 19 comments 19 reactions 0 assignees View on GitHub
area: material/table feature P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.