如何通过键盘激活mat-select组件内input元素的焦点？

针对MatSelect组件内HTML搜索框无法通过键盘激活光标（满足WCAG无障碍要求）的问题，提供以下几种可行方案：

方案一：利用MatSelect生命周期钩子手动聚焦 #

通过监听面板打开事件，在面板渲染完成后强制将焦点转移到搜索框，同时处理键盘导航逻辑避免冲突：

组件代码 #

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
  @ViewChild(MatSelect) matSelect!: MatSelect;

  ngAfterViewInit(): void {
    // 面板打开时聚焦搜索框
    this.matSelect.openedChange.subscribe(opened => {
      if (opened) {
        // 延迟执行确保面板DOM已渲染
        setTimeout(() => {
          this.searchInput.nativeElement.focus();
        }, 0);
      }
    });

    // 处理Tab键导航，维持逻辑连贯性
    this.matSelect.panel.nativeElement.addEventListener('keydown', (e: KeyboardEvent) => {
      if (e.key === 'Tab' && document.activeElement === this.searchInput.nativeElement) {
        e.preventDefault();
        // Tab键从搜索框跳转到第一个选项
        const firstOption = this.matSelect.panel.nativeElement.querySelector('.mat-option');
        firstOption && (firstOption as HTMLElement).focus();
      }
    });
  }
}

模板代码 #

<mat-select #matSelect>
  <mat-option>
    <input #searchInput type="text" placeholder="搜索..." aria-label="搜索选项">
  </mat-option>
  <!-- 其他选项 -->
</mat-select>

方案二：自定义无障碍指令封装逻辑 #

创建专属指令，统一处理MatSelect的键盘触发和焦点转移，方便复用：

指令代码 #

import { Directive, HostListener, Inject } from '@angular/core';
import { MatSelect } from '@angular/material/select';
import { DOCUMENT } from '@angular/common';

@Directive({
  selector: '[matSelectFocusSearch]'
})
export class MatSelectFocusSearchDirective {
  constructor(
    private matSelect: MatSelect,
    @Inject(DOCUMENT) private document: Document
  ) {}

  // 监听打开面板的键盘事件（Enter/Space）
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    if ((event.key === 'Enter' || event.key === ' ') && !this.matSelect.panelOpen) {
      this.matSelect.open();
      event.preventDefault();
      this.focusSearchInput();
    }
  }

  // 面板打开时自动聚焦
  @HostListener('openedChange', ['$event'])
  onOpenedChange(opened: boolean): void {
    opened && this.focusSearchInput();
  }

  private focusSearchInput(): void {
    setTimeout(() => {
      const searchInput = this.matSelect.panel.nativeElement.querySelector('input');
      searchInput && (searchInput as HTMLInputElement).focus();
    }, 0);
  }
}

使用方式 #

<mat-select matSelectFocusSearch>
  <mat-option>
    <input type="text" placeholder="搜索..." aria-label="搜索选项">
  </mat-option>
</mat-select>

方案三：调整焦点陷阱配置 #

MatSelect默认使用焦点陷阱（Focus Trap）限制面板内焦点范围，可手动将搜索框加入焦点允许列表：

代码示例 #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material/select';
import { FocusTrapFactory } from '@angular/cdk/a11y';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
  @ViewChild(MatSelect) matSelect!: MatSelect;

  constructor(private focusTrapFactory: FocusTrapFactory) {}

  ngAfterViewInit(): void {
    this.matSelect.openedChange.subscribe(opened => {
      if (opened) {
        const trap = this.focusTrapFactory.create(this.matSelect.panel.nativeElement);
        // 将搜索框注册到焦点陷阱
        trap.registerElement(this.searchInput.nativeElement);
        setTimeout(() => {
          this.searchInput.nativeElement.focus();
        }, 0);
      }
    });
  }
}

关键注意点 #

• 使用setTimeout延迟执行聚焦操作，确保面板DOM完全渲染。
• 给搜索框添加aria-label等无障碍属性，满足WCAG屏幕阅读器适配要求。
• 测试键盘导航逻辑（Tab/Shift+Tab/箭头键），确保操作连贯符合无障碍标准。

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