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

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?

CodePudding user response：

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>

CodePudding user response：

Within mat-nav-list, you can directly use <a> element along with mat-list-item attribute specified on it as below:

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

Accessibility - Navigation section from docs:

You should use MatNavList when every item in the list is an anchor that navigate to another URL. The root <mat-nav-list> element sets role="navigation" and should contain only anchor elements with the mat-list-item attribute. You should not nest any interactive elements inside these anchors, including buttons and checkboxes.

Navigation lists