MatMenu 中按钮上的 tabindex 角度不起作用

Question

我在我的 Angular 17 项目中使用材料。我想在我的项目中添加 ADA 合规性，并在必要时添加 tabindex。

我面临的问题是，我在 mat 菜单中有按钮，而 tabindex="0" 没有将焦点放在 MatMenu 中的按钮上。下面是我的代码。请让我知道如何在 MatMenu 中添加焦点按钮。

.ts

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

@ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;

openMenu(event:Event):void{
    event.preventDefault();
    this.menuTrigger.openMenu();
  }

.html

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

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

Answer 1

我认为我们缺少按钮的指令

mat-menu-item

，下面的工作示例！

<!-- #docregion mat-menu-trigger-for -->
<button
  mat-button
  [matMenuTriggerFor]="menu"
  (keydown.enter)="openMenu($event)"
>
  Menu
</button>
<!-- #enddocregion mat-menu-trigger-for -->
<mat-menu #menu="matMenu">
  <button mat-menu-item tabindex="0">Item 1</button>
  <button mat-menu-item tabindex="0">Item 2</button>
</mat-menu>

Stackblitz 演示