Vuetify中v-dialog角色显示为document而非dialog的问题排查

这是Vuetify组件的正常设计，你找错了DOM节点：

• Vuetify的v-dialog会生成两层核心容器：
  • 最外层的根容器（带v-dialog类）才是真正的对话框主体，它会带有role="dialog"和aria-modal="true"等符合ARIA规范的属性，用于标识模态对话框的身份。
  • 你当前检查到的role="document"是内层的内容容器（带v-dialog__content类），这个属性是为了遵循ARIA最佳实践，让屏幕阅读器能准确区分对话框容器和内部可阅读的内容区域。

简化后的DOM结构示例：

<div class="v-dialog" role="dialog" aria-modal="true">
  <div class="v-dialog__content" role="document">
    <!-- 自定义对话框内容 -->
  </div>
</div>

你可以往上一层DOM节点查看，就能找到带有role="dialog"的正确元素。

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