从无障碍视角出发：菜单触发模态框的交互最佳实践问询

从无障碍设计的核心原则出发，针对你描述的场景，最佳实践如下：

• 必须关闭下层的父菜单和子菜单
  模态框（Modal）是当前优先级最高的交互层级，保留下层菜单会带来一系列无障碍问题：

  • 语义混淆：屏幕阅读器会同时识别到可交互的菜单和Modal，让用户无法明确当前该处理哪个任务；
  • 误操作风险：键盘用户在操作Modal时，可能意外聚焦到下层菜单的选项，触发非预期的行为；
  • 不符合模态组件的定义：Modal的核心是强制用户完成当前任务，下层内容必须处于不可交互状态，菜单自然需要关闭并从无障碍树中移除。

• 关闭Modal后的焦点精准回归
  当用户点击保存或取消关闭Modal时，焦点要精准返回到触发Modal的那个菜单项，而不是父菜单或子菜单整体：

  • 这符合操作连贯性，用户能清晰感知到自己刚才操作的是哪一个选项；
  • 实现时需要在打开Modal前记录当前焦点的菜单项元素，关闭Modal后调用focus()方法将焦点移回该元素。

• 额外的无障碍优化细节

  • Modal打开时，自动将焦点移到Modal内的第一个可交互元素（比如「保存」按钮），同时给Modal添加role="dialog"和aria-modal="true"属性，配合焦点陷阱逻辑，确保键盘焦点无法移出Modal；
  • 菜单结构要正确使用ARIA角色：父菜单用role="menu"，子菜单和菜单项分别用role="menuitem"，让屏幕阅读器能识别完整的菜单层级；
  • 关闭菜单时，除了视觉隐藏，还要设置aria-hidden="true"或tabindex="-1"，确保菜单从无障碍树中移除，屏幕阅读器不会读取已关闭的菜单内容。

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