能否用Tab键而非箭头键导航Angular Material的mat-tabs？

Mat-Tabs默认遵循WAI-ARIA规范，用左右箭头键切换标签，直接在模板里设置tabindex会被组件内部逻辑覆盖，所以需要手动干预键盘事件和焦点管理，具体思路如下：

• 覆盖默认键盘行为
  通过ViewChild获取MatTabGroup实例，在组件初始化完成后（ngAfterViewInit钩子），给每个标签头部绑定键盘事件：

  1. 遍历所有.mat-tab-label元素，手动设置tabindex="0"，让Tab键能聚焦到每个标签；
  2. 监听keydown事件，当按下Tab键时阻止默认页面跳转行为，根据是否按住Shift键计算下一个要切换的标签索引；
  3. 切换标签后主动聚焦到目标标签头部，同时可选择阻止默认的箭头键切换行为。

  示例代码：

  import { Component, ViewChild, AfterViewInit } from '@angular/core';
  import { MatTabGroup } from '@angular/material/tabs';
  
  @Component({
    selector: 'app-tab-group-basic',
    templateUrl: './tab-group-basic-example.html',
    styleUrls: ['./tab-group-basic-example.css']
  })
  export class TabGroupBasicExample implements AfterViewInit {
    @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
  
    ngAfterViewInit() {
      const tabHeaders = this.tabGroup._tabHeader.nativeElement.querySelectorAll('.mat-tab-label');
      
      tabHeaders.forEach((header: HTMLElement, index: number) => {
        header.setAttribute('tabindex', '0');
        
        header.addEventListener('keydown', (e) => {
          if (e.key === 'Tab') {
            e.preventDefault();
            const tabCount = this.tabGroup._tabs.length;
            let nextIndex = e.shiftKey ? index - 1 : index + 1;
            // 处理边界循环，也可改成停在首尾
            nextIndex = (nextIndex + tabCount) % tabCount;
            
            this.tabGroup.selectedIndex = nextIndex;
            tabHeaders[nextIndex].focus();
          } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
            // 阻止默认箭头键切换，若需要保留可删除这段
            e.preventDefault();
          }
        });
      });
    }
  }
  

• 处理动态标签场景
  如果标签是动态生成的，需要在标签列表变化后重新执行上述绑定逻辑，可以借助ngAfterViewChecked钩子，或者监听MatTabGroup的selectedIndexChange事件、标签数组的变化事件，确保新生成的标签也能获得Tab键导航能力。

• 注意无障碍兼容性
  修改键盘导航逻辑后，建议保留标签原有的ARIA属性，确保屏幕阅读器仍能正常识别标签状态，必要时可添加自定义的无障碍提示。

内容的提问来源于stack exchange，提问作者tylkonachwile