我在我的 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>
我认为我们缺少按钮的指令
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>