menubar

何时使用

适用于模仿桌面应用主菜单（文件、编辑、查看……）的持久性应用风格菜单栏。最合理的使用场景是基于 Web 的创作工具、IDE 及全屏生产力应用。

如果您的「菜单栏」实际上是网站页眉导航，则它不是 menubar。请使用包含 <a> 链接 <ul> 的 <nav>。menubar 角色要求单一制表位、方向键导航和 Escape 关闭 — 这些都与用户对网站页眉的预期不符。

menubar 的子元素通常为 role="menuitem" 触发器，并通过 aria-haspopup="menu" 打开子菜单。

键盘与焦点规范

根据 APG menubar 模式：

• Tab 键进入菜单栏时聚焦于第一个或上次聚焦的菜单项；再次按 Tab 则移出菜单栏。
• 左/右方向键在顶层菜单栏项之间移动焦点（支持循环切换）。
• 下方向键（或 Enter/Space）打开聚焦项的子菜单并将焦点移至其第一个 menuitem。
• 上方向键打开子菜单并将焦点移至最后一个 menuitem。
• 在子菜单内按 Escape 关闭子菜单并将焦点返回对应的菜单栏项。
• 首字母快速跳转：输入字母可跳转到以该字母开头的下一个菜单项。

使用漫游 tabindex 管理焦点。

常见错误

• 在网站主 <nav> 上使用 role="menubar"。宣告的角色与用户预期不匹配。
• 每个菜单项都设置了 tabindex="0"，导致 Tab 键遍历所有菜单栏项。该模式应使用单一制表位。
• 子菜单仅在悬停时打开，而不响应下方向键。
• 触发子菜单的菜单栏项上缺少 aria-haspopup/aria-expanded。
• 在子菜单内按 Escape 收起菜单后焦点丢失 — 必须将焦点返回父级菜单栏项。

示例

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edit</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">View</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>