Angular Material Tab focus with Tabulator button

Question

I have the following 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>

(from here )

Currently, I must improve the a11y aspects of this, and the request is that the user should be able to navigate the tabs with the "Tab" button on the keyboard. The default way in material is that you can only focus the "tab-group" as a whole, and then can select the mat-tabs with the arrow keys.

Is there any way to change this? To integrate the tabs themselves into the focus order instead of the groups?

You can see I have tried cdkTrapFocus and tabIndex as well but no luck. I also tried removing the mat-tab-group but strangely only the first mat-tab gets focus that way too.

Answer 1

Keydown event could be the solution

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