Angular 2+ mat-tab-nav-bar 导航 - 辅助功能

Question

Angular material 给我们应用内 navigation with tabs.

来自 Angular:

<nav mat-tab-nav-bar> provides a tab-like UI for navigating between routes.

我想让它更易于访问。

我们现在拥有的：

带箭头的导航(leftrightupdown) 抛出列表项。
输入 激活所选标签。
Tab照常关注DOM中的元素（不更新选区为方向键，详见下文）

辅助功能要求：

Tab 将聚焦于活动选项卡（不一定是聚焦选项卡）。
Shift+Tab 将跳转到 DOM 中的上一个元素，在 nav 项目之前。在路由器的内容页面上 Shift+Tab 将从第一个可聚焦元素跳转到 nav.
Space 应激活选定的选项卡，如单击鼠标并按 Enter。
nav 中的元素（a 个元素）将具有正确的 aria 个角色。

我不想更改结构，只需添加选项卡所期望的可访问性即可。

有什么帮助吗？如何使用 Tab 和 Shift+Tab 键以正确的方式实现对 nav 内容的关注？

正在寻找正确的结构。

更多详情：

用于导航的 angular 的 mat-tab-nav-bar 和 mat-tab-link 指令仅提供一个 'like' 选项卡 UI。我想通过具有键盘辅助功能的 <router-outlet></router-outlet> 指令元素启用应用内路由导航。

从可访问性方面来看，我希望使用 arrow keys 浏览链接，Enter 激活选定的选项卡，并且 Tab 键会将焦点移动到路由页面的内容。

因为我想在用户切换选项卡时更新 URL 我将 nav 元素与 angular mat-tab-nav-bar 指令一起使用，如下例所示：

<nav mat-tab-nav-bar>
  <a mat-tab-link
  *ngFor="let vehicle of vehicles; let i = index" 
    routerLink="{{vehicle}}"
            routerLinkActive="active"
    (click)="activeLink = vehicle"
    [active]="activeLink == vehicle">
    {{vehicle}}
  </a>
</nav>
<router-outlet></router-outlet>

在 'real' nav 和 a 元素中，您只能通过 Tab 使用键盘导航，但不能使用箭头键。但是使用 mat-tab-nav-bar 指令路由抛出选项卡确实通过箭头工作，但是 Tab 没有为 a 元素禁用。

我想启用 tab 键移动到所选选项卡的内容。想过angularFocusMonitor，或者KeyManager来解决这种情况，但是都没有达到想要的效果。我还可以自动将焦点捕获到选定的选项卡内容，但这又不完全是选项卡的行为。

例如，在此 demo 中，我想使用箭头键导航标签“汽车”、“飞机”和“自行车”。选择选项卡时（使用 Enter 或 mouse），Tab 键将导航到内容中的输入字段。目前我所取得的成就只是在选择一个选项卡时专注于输入（如“自行车”选项卡所示）。但我想像真正的标签一样导航。

顺便说一句，如果您在 mat-tab-nav-bar 指令上使用 Tab 导航抛出选项卡，您将看到焦点从一个选项卡移动到另一个选项卡，然后按回车键将触发 a 元素上的 click 事件。但是，如果您按箭头键导航并抛出选项卡，焦点将跳转到最后一个活动选项卡。简单重现：使用 Tab 键导航两次，然后按 right-arrow 键。你会看到焦点 'jumped' 向后退了一步。

这里可以看出区别（例子来自官方site）：

'Real' tabs: 按tab会进入tab的内容

'Like' tabs：按下 tab 将继续抛出 DOM.

中的元素

谢谢！

Answer 1

我找到了解决主要问题的好方法 - Tab/shift+Tab 问题。

Simple directive 做作业。

@Directive({
  selector: '[mat-tab-link]',
  host: {
      '[attr.tabindex]': 'getTabIndex',
  }
})
export class AccessibleTabNavDirective {

  constructor(private tabLink: MatTabLink) { }

  get getTabIndex() {
    return this.tabLink.active ? 0 : -1;
  }
}

请注意，在一种情况下它是走狗。如果一个选项卡 selected 和前一个选项卡聚焦，下一个选项卡将聚焦在 selected 选项卡上。例如：select 第二个选项卡和 return 到上一个选项卡（使用 向左箭头 ）- 下一个 Tab 按下将聚焦于活动选项卡，而不是页面内容。

但是这个问题发生在 'real' angular 选项卡中，所以我暂时保留它。

如果您对 Space 也有很好的解决方案...欢迎您发表评论。

Angular 2+ mat-tab-nav-bar 导航 - 辅助功能

Angular 2+ navigation with mat-tab-nav-bar - accessibility

accessibility

router-outlet

angular

更多详情：