Angular Material 带有 Tabulator 按钮的 Tab 焦点

Question

我有以下 angular material 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 中的默认方式是您只能将“选项卡组”作为一个整体进行聚焦，然后可以使用方向键 select mat-tabs。

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

你可以看到我也尝试了 cdkTrapFocus 和 tabIndex 但没有成功。我也尝试删除 mat-tab-group 但奇怪的是只有第一个 mat-tab 也以这种方式获得焦点。

Answer 1

按键事件可能是解决方案

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

Angular Material 带有 Tabulator 按钮的 Tab 焦点

Angular Material Tab focus with Tabulator button

angular-material

angular