带有制表符按钮的 Angular 材质选项卡焦点答案

【问题标题】：Angular Material Tab focus with Tabulator button带有制表符按钮的 Angular 材质选项卡焦点
【发布时间】：2021-07-15 09:28:18
【问题描述】：

我有以下棱角材质tab-group：

<mat-tab-group mat-align-tabs="start">
  <mat-tab  tabindex="0" cdkTrapFocus label="First">Content 1</mat-tab>
  <mat-tab  tabindex="1" cdkTrapFocus label="Second">Content 2</mat-tab>
  <mat-tab  tabindex="2" cdkTrapFocus label="Third">Content 3</mat-tab>
</mat-tab-group>

（来自here）

目前，我必须改进这方面的 a11y，要求用户应该能够使用键盘上的“Tab”按钮导航选项卡。 material中的默认方式是只能将“tab-group”整体聚焦，然后可以用方向键选择mat-tabs。

有什么办法可以改变吗？要将选项卡本身而不是组集成到焦点顺序中？

您可以看到我也尝试过cdkTrapFocus 和tabIndex，但没有运气。我还尝试删除mat-tab-group，但奇怪的是只有第一个mat-tab 也以这种方式获得焦点。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

Keydown 事件可能是解决方案

<mat-tab-group mat-align-tabs="start" [(selectedIndex)]=selectedStartIndex (keydown)="onKey($event, 'start')">
    <!-- #enddocregion align-start -->
    <mat-tab label="First">Content 1</mat-tab>
    <mat-tab label="Second">Content 2</mat-tab>
    <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="center" [(selectedIndex)]=selectedCenterIndex (keydown)="onKey($event, 'center')">
    <mat-tab label="First">Content 1</mat-tab>
    <mat-tab label="Second">Content 2</mat-tab>
    <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="end" [(selectedIndex)]=selectedEndIndex (keydown)="onKey($event, 'end')">
    <mat-tab label="First">Content 1</mat-tab>
    <mat-tab label="Second">Content 2</mat-tab>
    <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

import { Component } from '@angular/core';

/**
 * @title Tab group with aligned labels
 */
@Component({
  selector: 'tab-group-align-example',
  templateUrl: 'tab-group-align-example.html',
  styleUrls: ['tab-group-align-example.css']
})
export class TabGroupAlignExample {
  selectedStartIndex: any = 0;
  selectedCenterIndex: any = 0;
  selectedEndIndex: any = 0;
  selectedGroup: String = '';
  onKey(event: KeyboardEvent, group: String) {
    if (event.key == 'Tab')
      switch (group) {
        case 'start':
          if (this.selectedGroup != group) {
            event.preventDefault();
            this.selectedStartIndex = 0;
          } else if (this.selectedStartIndex < 2) {
            event.preventDefault();
            this.selectedStartIndex++;
          }
          this.selectedGroup = group;
          break;
        case 'center':
          if (this.selectedGroup != group) {
            event.preventDefault();
            this.selectedCenterIndex = 0;
          } else if (this.selectedCenterIndex < 2) {
            event.preventDefault();
            this.selectedCenterIndex++;
          }
          this.selectedGroup = group;
          break;
        case 'end':
          if (this.selectedGroup != group) {
            event.preventDefault();
            this.selectedEndIndex = 0;
          } else if (this.selectedEndIndex < 2) {
            event.preventDefault();
            this.selectedEndIndex++;
          }
          this.selectedGroup = group;
          break;
      }
  }
}

【讨论】：