Angular 角度2+；使用mat选项卡导航栏导航-辅助功能

角材料给我们的应用

按角度：

提供类似于选项卡的UI用于在路线之间导航

我想让它更容易接近

我们现在拥有的：

带箭头的导航（leftrightupdown）抛出列表项

输入并激活所选选项卡

选项卡像往常一样关注DOM中的元素（不要像箭头键那样更新选择，详细信息如下）

无障碍要求：

选项卡将聚焦于活动选项卡（不需要聚焦选项卡）

导航列表上的Shift+Tab将跳转到DOM中

nav

项之前的上一个元素。 在路由器的内容页上，Shift+选项卡将从

nav

中的第一个可聚焦元素跳转到上一个活动元素

空间应激活所选选项卡，如鼠标单击并按Enter键

nav

（

a

元素）中的元素将具有正确的

aria

角色

我不想改变它的结构，只需将它添加到选项卡所期望的可访问性

需要帮忙吗？ 如何使用Tab键和Shift+Tab键以正确的方式实现对

nav

内容的关注

寻找正确的结构

---

更多详情： 导航角度的

mat-tab导航栏

和

mat-tab链接

指令仅提供“类似”选项卡UI。 我想通过具有键盘可访问性的

指令元素启用应用程序内路由导航

从可访问性方面来看，我希望通过

箭头键

，

回车

激活所选选项卡，

选项卡

键将焦点移动到路由页面的内容

因为我想在用户更改选项卡时更新URL，我使用了

mat-tab-nav-bar

指令的

nav

元素，如下例所示：

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

我想用箭头键导航标签“汽车”、“飞机”和“自行车”。选择tab（使用
输入
或
鼠标
）时，
选项卡
键将导航到内容中的输入字段。
目前，我所做的只是在选择一个选项卡时关注输入（如“Bikes”选项卡所示）。但我想像真正的标签一样导航

顺便说一句，
如果在
mat-Tab导航栏
指令上导航并使用
Tab
抛出选项卡，您将看到焦点从一个选项卡移动到另一个选项卡，按enter键将触发
a
元素上的单击事件。但如果按箭头键导航并抛出选项卡，焦点将跳转到最后一个活动选项卡。
简单复制：使用
选项卡
键导航两次，然后按
右箭头
键。你会看到焦点向后跳了一步

在这里，您可以看到不同之处（来自官方的示例）：

：按tab键将进入选项卡内容

：按tab键将只移动并抛出DOM中的元素

谢谢
 我为主要问题找到了一个很好的解决方案——Tab/shift+Tab问题

做这项工作

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

  constructor(private tabLink: MatTabLink) { }

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

请注意，在一个案例中，它是仆人。如果选择了一个选项卡且上一个选项卡已聚焦，则下一个选项卡将聚焦于所选选项卡。例如：选择第二个选项卡并返回到上一个选项卡（带左箭头）-下一次按tab键时将关注活动选项卡，而不是页面内容

但这个问题发生在“真实”的角度标签中，所以我暂时保持原样

如果你也有一个很好的空间解决方案。。。欢迎您发表评论
 很抱歉，我没有遵循您想要的行为，您想要像“真实”选项卡一样的行为还是像“工作示例”一样的行为。我把这个问题重读了几遍，但还是没听懂。我认为您正在尝试从菜单栏动态加载页面，然后确保下次按“tab”时，页面进入新页面内容。如果是这样的话，您是否愿意接受一种稍微“更好”（更广泛接受）的方式，允许您在应用程序/网站中使用标准导航元素，并解决动态加载的一些问题？我明白了吗？还是别的什么？谢谢@GrahamRitchie。我希望它像真正的标签一样工作（箭头移动并抛出标签，然后
Tab
导航到选定的标签内容）。我编辑了这个问题