Angular Material：带键盘导航的 MAT-NAV-LIST

Question

因此，在几乎完成我们的 MVP 之后，我们现在正在研究应用程序的可访问性，其中最重要的部分之一是导航。

我们使用的是简单的 <mat-nav-list> 组件，其中包含 mat-list-item 个组件，每个组件都有一个 routerLink。

像这样：

<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>

现在，使用 TAB 键导航工作正常，按下 ENTER（或 SPACE）应该触发（正常点击）或 routerLink（就像在普通链接上一样）。

下一点是使用箭头键向上和向下导航....它不会...但是如果我要使用 mat-selection-list 和 mat-list-option...键盘导航有效（同样适用于 mat-menu。

如何让 mat-item 被 enter 键触发（而不是在每个项目上放置 keydown.enter... 或放置）并使其可以通过箭头键访问？

我也试过 Material 的 CDK ListKeyManager

private keyManager!: ListKeyManager<MatListItem>;

但缺乏文档和示例让我头晕目眩……似乎没有办法做到这一点，因为它需要一个焦点界面，而我无法在 mat-list-item 组件中实现它……

有什么想法吗？

Answer 1

为每个菜单项设置 tabindex 或将此部分放在按钮或标签中

<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>

Answer 2

在 mat-nav-list 中，您可以直接使用 <a> 元素及其指定的 mat-list-item 属性，如下所示：

<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 文档部分：

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

Answer 3

我认为您不能将用于键盘导航的 ListKeyManager 添加到 Angular Material 导航列表。只有 MatSelectionList 和 MatListOption 似乎实现了正确的接口。

您最好创建自己的列表和列表项组件。这是一篇解释如何做到这一点的文章。它还链接到 Stackblitz 示例。

Doing A11y easily with Angular CDK. Keyboard-Navigable Lists

Angular Material：带键盘导航的 MAT-NAV-LIST

Angular Material: MAT-NAV-LIST with keyboard navigation

angular-material

angular