Vuetify：如何将 aria-labelledby 添加到 v-dialog？

Question

我正在尝试在 Vuetify 对话框中使用 aria-labelledby 属性，如下所示：

<v-dialog v-model="show" max-width="600px" aria-labelledby="testDialogTitle">
  <span id="testDialogTitle">Test Dialog</span>
</v-dialog>

但是该属性并没有添加到 role="dialog" 的元素中，而是添加到从我的主模板引用它的元素中。如何使用 role="dialog" 将此属性添加到我的对话框中？

谢谢

Answer 1

多亏了评论中的提示，我才得以实现：

<v-dialog v-model="show" max-width="600px" ref="dialog" aria-labelledby="testDialogTitle">
  <span id="testDialogTitle">Test Dialog</span>
</v-dialog>

watch: {
  show: {
    immediate: true,
    handler: function (newValue) {
      if (newValue) {
        this.$nextTick(() => {
          const dialog = this.$refs?.dialog;
          const content = dialog?.$refs?.content;
          if (content) {
            // Copy aria-labelledby from v-dialog to new rendered element.
            content.setAttribute('aria-labelledby', dialog.$attrs['aria-labelledby']);
          }
        });
      }
    }
  }
}

Vuetify：如何将 aria-labelledby 添加到 v-dialog？

Vuetify: How to add aria-labelledby to v-dialog?

vuejs2

vuetify.js