'Angular Material: MAT-NAV-LIST with keyboard navigation

So after almost completing our MVP we are now working on accessibility of our app, one of the most important bits is the navigation.

we are using simple <mat-nav-list> component with mat-list-items inside that each has a routerLink.

something like this:

<mat-nav-list id="app-nav" tabindex="1" aria-label="Main navigation">
  <mat-list-item [routerLink]="['user-account']">
    <mat-icon mat-list-icon>badge</mat-icon>
    <span mat-line>Your profile</span>
  </mat-list-item>
  ...
</mat-nav-list>

Now, navigating with a TAB key works fine, what it doesn't to my surprise is pressing ENTER (or SPACE) which should trigger the (normal click) or routerLink (as it does on normal links).

The next bit is navigating with ARROW keys up and down.... it does not... but if I would be to use mat-selection-list, with mat-list-option... the keyboard navigation works (similarly it works on mat-menu.

How can I make mat-item being triggered by enter key (without putting keydown.enter on every item... or putting ) and make it accessible with arrow keys?

I also tried with Material's CDK ListKeyManager

private keyManager!: ListKeyManager<MatListItem>;

but the lack of documentation and examples is spinning my head... seems like there is no way to do this since it needs a focus interface and I cannot implement it in mat-list-item component...

any ideas?

angular angular-material

Solution 1:^[1]

Set tabindex for every menu item or put this part inside a button or a tag

<button .....>
    <mat-icon mat-list-icon>badge</mat-icon>
    <span mat-line>Your profile</span>
</button>

<a ...>
    <mat-icon mat-list-icon>badge</mat-icon>
    <span mat-line>Your profile</span>
</a>

Solution 2:^[2]

I don't think you can add ListKeyManager for keyboard navigation to an Angular Material navigation list. Only the MatSelectionList and it's MatListOption seems to implement the correct interface.

You're probably better off creating your own list and list item components. Here is an article explaining how to do that. It also links to a Stackblitz example.

Doing A11y easily with Angular CDK. Keyboard-Navigable Lists

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ali Adravi
Solution 2	Bryan Sullivan

'Angular Material: MAT-NAV-LIST with keyboard navigation

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]