Vue 3 v-menu设role=dialog后屏幕阅读器异常播报全部内容问题

核心原因与解决建议 #

1. 对齐Vue的异步渲染周期 #

Vue的DOM更新是异步队列化的，你手动设置焦点的时机可能早于菜单DOM完全渲染完成——哪怕用了延迟，也可能没对齐Vue的更新节奏。必须用nextTick()确保DOM渲染完成后再设置焦点：

Options API写法：

// 菜单打开的回调函数
onMenuOpen() {
  this.$nextTick(() => {
    document.getElementById('profile-btn').focus();
  });
}

Composition API写法：

import { nextTick } from 'vue';

const openMenu = async () => {
  // 触发菜单打开的逻辑（比如修改控制菜单显示的ref值）
  await nextTick();
  document.getElementById('profile-btn').focus();
};

2. 暂时屏蔽非首要焦点元素的自动扫描 #

屏幕阅读器会默认扫描对话框内所有可聚焦元素并播报，你可以给非目标元素临时设置tabindex="-1"，让它们暂时脱离焦点遍历，避免被自动播报：

<v-menu role="dialog" aria-modal="true">
  <template v-slot:activator="{ props }">
    <button v-bind="props">打开个人菜单</button>
  </template>
  <div>
    <button id="profile-btn">我的资料</button>
    <!-- 其他可聚焦元素临时设为不可遍历 -->
    <button tabindex="-1">账号设置</button>
    <button tabindex="-1">退出登录</button>
  </div>
</v-menu>

等用户主动按下Tab键时，再把这些元素的tabindex改回0，恢复正常焦点遍历逻辑。

3. 明确对话框的关联标签 #

给v-menu添加aria-labelledby属性，关联到聚焦的按钮元素，让屏幕阅读器明确知道对话框的核心关联元素，减少自动扫描范围：

<v-menu role="dialog" aria-modal="true" aria-labelledby="profile-btn">
  <!-- 菜单内容 -->
</v-menu>

4. 禁用v-menu的默认焦点逻辑 #

Vuetify的v-menu组件内部可能自带自动焦点管理（比如默认聚焦菜单内第一个可聚焦元素），和你手动设置的焦点产生冲突。可以检查组件文档，找到对应的props（比如auto-focus）并将其禁用，完全接管焦点控制。

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