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

[palarnab]

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.

[rohanshenoy96]

Is there any implementation of this feature done?

[douglasgsouza]

I implemented it this way: @andrewseguin @rohanshenoy96 @palarnab

.html

<table class="data-table" mat-table fxFlex [dataSource]="dataSource">
    <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>Tipo</th>
        <td mat-cell *matCellDef="let item">{{item.type}}</td>
    </ng-container>
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Descrição</th>
        <td mat-cell *matCellDef="let item">{{item.name)}}</td>
    </ng-container>
    <ng-container matColumnDef="quantity">
        <th class="text-right" mat-header-cell *matHeaderCellDef>Quantidade</th>
        <td class="text-right" mat-cell *matCellDef="let item">{{item.quantity | number: '1.2-2'}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr tabindex="999" mat-row *matRowDef="let row; columns: displayedColumns;" (keydown)="tableKeydown($event)" (click)="selection.toggle(row)" [ngClass]="{'selected-pink': selection.isSelected(row)}"></tr>
</table>

The tabindex in TR make keyboard focus work.

.ts

dataSource: MatTableDataSource<TableItem>;
selection: SelectionModel<TableItem>;
displayedColumns = ['type', 'name', 'quantity'];

tableKeydown(event: KeyboardEvent) {
    if (!this.selection.isEmpty()) {
        let newSelection;
        const currentSelection = this.selection.selected[0];
        const currentIndex     = this.dataSource.data.findIndex(row => row === currentSelection);
        if (event.key === 'ArrowDown') {
            newSelection = this.dataSource.data[currentIndex + 1];
        } else if (event.key === 'ArrowUp') {
            newSelection = this.dataSource.data[currentIndex - 1];
        }
        if (newSelection) {
            this.selection.toggle(newSelection);
        }
    }
}

Can be simplified according to your SelectionModel.

[douglasgsouza]

I made a Directive for that with some improvements:

MatRowKeyboardSelection

https://www.npmjs.com/package/mat-row-keyboard-selection

@palarnab @andrewseguin

[Fp-jmorato]

@douglasgsouza thanks for your solution, do you know how I can focus the first row when the table is rendered?

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[stefan123t]

Can we tag this issue with an accessibility label, as it turned up in our manual WCAG and accessibility tests performed routinely. This is the major blocker for users of JAWS and other screenreaders for our blind users. Thanks for reconsidering the work done by @douglasgsouza for inclusion into Angular. Kind regards, Stefan

[weberhofer]

Would be great to have an improvement here!

[stefan123t]

What is the voting system of the angular-robot supposed to do, we have +11 on the initial issue post and 7 participants that is more than 100%. I do understand that accessibility may not be everybodys darling but it is a necessary evil for people in need like blind or otherwise disabled persons, think the late Steve Hawkins who would need to be able to navigate a table with his cheek. Thanks for reconsidering.

[JoaquimCAP]

Same problem here, we are trying to render a mat-table as the WCAG example (https://www.w3.org/WAI/ARIA/apg/example-index/grid/dataGrids.html) to navigate with the keyboard arrows, and for the moment the only PRO solution is to work with Angular Data Grid (https://www.ag-grid.com/angular-data-grid/keyboard-navigation/). This issue needs to be concerned by the WCAG / accessibility.