JAWS未播报aria-haspopup="menu"菜单按钮的折叠/展开状态，如何解决？

要让JAWS正确播报菜单按钮的折叠/展开状态，核心是确保ARIA状态属性与菜单状态动态同步，结合Angular Material的MatMenuTrigger提供的状态能力实现，具体配置如下：

• 绑定动态aria-expanded属性：MatMenuTrigger会实时维护菜单的打开状态（menuOpen属性），将该状态绑定到按钮的aria-expanded上，让JAWS能感知状态变化。
• 保留aria-haspopup="menu"：该属性用于告知辅助技术按钮关联菜单组件，但必须配合动态的aria-expanded才能完整播报状态。

修改后的代码示例 #

模板部分

<app-my-button 
  [matMenuTriggerFor]="menu" 
  tabindex="0" 
  role="button" 
  aria-label="Open Content"
  aria-haspopup="menu"
  [attr.aria-expanded]="menuTrigger.menuOpen"
></app-my-button>

<mat-menu #menu="matMenu">
  <!-- 菜单内容 -->
</mat-menu>

组件类部分

import { Component, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 获取菜单触发器实例
  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;
}

额外注意事项 #

• 确保自定义的app-my-button组件没有覆盖外部传入的ARIA属性，允许外部动态绑定状态属性。
• 若使用键盘（Enter/空格键）触发菜单，确保MatMenuTrigger的默认键盘交互逻辑正常，状态会自动同步。

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