使用 mat-tab-nav-bar 的 Angular 2+ 导航 - 可访问性

Question

Angular Material 为我们提供了应用内 navigation with tabs .

按 Angular :

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

我想让它更易于访问。

我们现在拥有的:

1. 带箭头的导航(左右上下)抛出列表项。

2. Enter 激活所选标签。

3. Tab 像往常一样关注 DOM 中的元素(不是像箭头键那样更新选择，详情如下)。

辅助功能要求:

1. Tab 将聚焦于事件选项卡(不一定是聚焦选项卡)。
导航列表上的
2. Shift+Tab 将跳转到 DOM 中的上一个元素，在 nav 之前元素。 在路由器的内容页面上，Shift+Tab 将从第一个可聚焦元素跳转到 nav 中的前一个事件元素。 .
3. Space 应激活选定的选项卡，如鼠标单击和 Enter 按下。
4. nav 中的元素( a 元素)将与右边的 aria Angular 色。

我不想改变结构，只是添加它期望从选项卡中获得的可访问性。

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

寻找正确的结构。

---

更多详情:

mat-tab-nav-bar和 mat-tab-link用于导航的 Angular Directive(指令)仅提供“类似”选项卡 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>

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

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

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

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

这里可以看出区别(例子来自官方site):

'Real' tabs : 按下标签将进入标签的内容。

'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;
  }
}

请注意，在一种情况下它是走狗。如果选择了一个选项卡并且前一个选项卡聚焦，则下一个选项卡将聚焦于所选选项卡。例如:选择第二个选项卡并返回上一个选项卡(使用 Left-arrow)- 下一个 Tab 按下将聚焦于事件选项卡而不是页面内容.

但这个问题发生在“真正的” Angular 选项卡中，所以我暂时保留它。

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