Mat 菜单默认聚焦列表中的项目

问题描述 投票:0回答:3

我有一个包含多个选项的垫式菜单。如果打开,它将聚焦或突出显示列表中的第一项。我怎样才能让它聚焦/突出显示我选择的项目 - 比如第三个项目?

<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>
angular angular-material
3个回答
3
投票

由于可访问性,不建议这样做。如果视障用户打开菜单,他希望焦点位于第一个菜单项上。

来源:https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links#kbd_label


1
投票

向要聚焦的菜单项元素添加模板引用,然后使用 @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');
}

附注我正在使用最新的角材质版本


0
投票

我也有同样的行为。我注意到,当聚焦 mat-list-item 时,它有一个 ::before sudo 元素。我通过设置我的 .scss

修复了它
mat-list-item::before {
  display: none;
}

这适用于角度材料:18.1.0。自这篇文章发布以来已经过去了一段时间,但希望它对其他人有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.