CODEWITHSUNDEEP
angularangular-material
ForestG
ForestG

Reputation: 18085

Angular Material Tab focus with Tabulator button

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.

Upvotes: 4

Views: 1852

Answers (1)

Moshe Fortgang
Moshe Fortgang

Reputation: 1125

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

Upvotes: 1

Related Questions