Angular 17中MatMenu内按钮tabindex失效问题求助

问题本质 #

MatMenu组件自身会管理内部元素的焦点逻辑，手动设置tabindex="0"会被组件的内部焦点陷阱（focus trap）机制覆盖，导致按钮无法正常获取焦点。同时要满足ADA合规，需确保菜单打开后焦点能正确转移到可交互元素上。

解决方案 #

1. 菜单打开后主动设置焦点 #

利用MatMenu的openMenu()返回的Promise，在菜单完全打开后手动将焦点定位到内部按钮：

import { MatMenuTrigger } from '@angular/material/menu';

@ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;

openMenu(event: Event): void {
    event.preventDefault();
    this.menuTrigger.openMenu().then(() => {
        // 定位到菜单内的Close按钮并设置焦点
        const closeBtn = document.querySelector('.menu-popover button') as HTMLElement;
        closeBtn?.focus();
    });
}

2. 移除冗余的tabindex设置 #

原生<button>元素默认自带可聚焦属性（tabindex默认值为0），无需手动添加，移除后能避免和MatMenu的焦点管理逻辑冲突：

<mat-menu #menu="matMenu" class="menu-popover">    
    <div class="popover-text">Are you sure you want to edit this?</div>
    Test Menu
    <button>Close</button>
</mat-menu>

3. 完善触发元素的键盘交互 #

为触发菜单的div补充空格键触发逻辑，符合ADA键盘操作规范：

<div tabindex="0" [matMenuTriggerFor]="menu" (keydown.enter)="openMenu($event)" (keydown.space)="openMenu($event)">OPEN DIV</div>

核心逻辑说明 #

MatMenu打开时会创建独立的DOM容器并启用焦点陷阱，强制焦点在菜单内部循环。直接设置tabindex会被该机制忽略，通过在菜单打开完成后调用focus()方法，能绕过组件的自动焦点分配，确保焦点落在目标按钮上，同时满足可访问性要求。

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