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.

[plaetzchen79]

The mat-table does still not follow the wcag rules regarding keyboard navigation.

[stefan123t]

@douglasgsouza given that andrewseguin has removed his assignment, would you be willing to create a PR for your solution ?

[araareon]

I doubt that his solution still works since we are on Angular 18 now. Really annoying that this issue doesnt get recognized by the angular team - although they have already improved other components to fullfill wcag a11y. Starting on July 2025 there is a law in germany saying that every new software has to be accessible ("Barrierefreiheitsstärkungsgesetz")

[stefan123t]

@araareon thanks for pinging back.

Off-Topic: Actually the law you mentioned already has been ratified in 2021 and is since binding e.g. for german government agencies. In fact it is just the local implementation of the European Accessibility Act (EAA) hence should be implemented in all EU countries.

[araareon]

@andrewseguin is someone from the angular team aware of this issue? thank you

[aarstgo]

i would also really appreciate a solution within the grid or perhaps something like the ListKeyManager to add the navigation

[stefan123t]

@crisbeto, @devversion, @jelbourn may we draw the attention of the Angular Components team to this long open issue on accessibility and request some feedback on its status or your plans ?

[Iandris]

@andrewseguin, @jelbourn, @devversion, @crisbeto - anyone?? I work for a government agency which must meet or exceed accessibility standards of WCAG 2.1 AA or higher for all Information and Communication Technology as required by U.S. Law in Section 508 of the Rehabilitation Act. Keyboard navigation and functionality throughout a site, including a table of presented data is a requirement for accessibility. After over 5 years, how has this still not been addressed by the Angular team?