我有一个包含多个选项的垫式菜单。如果打开,它将聚焦或突出显示列表中的第一项。我怎样才能让它聚焦/突出显示我选择的项目 - 比如第三个项目?
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
</mat-menu>
由于可访问性,不建议这样做。如果视障用户打开菜单,他希望焦点位于第一个菜单项上。
来源:https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links#kbd_label
向要聚焦的菜单项元素添加模板引用,然后使用 @ViewChild 获取元素引用,然后打开菜单时使用 focusItem 模板引用将焦点设置到菜单项
<button mat-button [matMenuTriggerFor]="menu" (menuOpened)="menuOpened()">
Menu
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item #focusItem>Item 3</button>
<button mat-menu-item>Item 4</button>
</mat-menu>
@ViewChild('focusItem')
menuItemElement: MatMenuItem;
menuOpened() {
this.menuItemElement.focus('keyboard');
}
附注我正在使用最新的角材质版本
我也有同样的行为。我注意到,当聚焦 mat-list-item 时,它有一个 ::before sudo 元素。我通过设置我的 .scss
修复了它mat-list-item::before {
display: none;
}
这适用于角度材料:18.1.0。自这篇文章发布以来已经过去了一段时间,但希望它对其他人有帮助。