如何在打开后将屏幕 reader 焦点更改为 vuetify 模态？
How to change screen reader focus to vuetify modal once it opens?
我正在对一个项目实施可访问性调整，我需要使仅使用键盘即可浏览页面成为可能。我在使用 vuetify 的 v-dialog 组件时遇到模态问题。当我尝试将页面的焦点更改为屏幕阅读器向用户宣布的模式中的内容时。我试过手动使用 Javascrípt document.getElementById('id').focus() 和 Vue $refs 像 this.$refs.dialog.focus() 但没有成功。控制台中没有出现错误，它只是不关注模态的内容。
我注意到 vuetify 将 role="document" 属性 添加到模态 div 但我不知道这是否是原因：
如何在模式中聚焦内容？
您必须等待对话框转换完成，然后在 JavaScript 中检测到转换完成，然后聚焦对话框中的第一个元素。
为此，您需要做的是检测我们触发的 CSS 过渡的结束并将焦点返回对话框中的第一个元素，如下所示：
dialog.addEventListener('transitionend', (e) => {
dialog.querySelector('input').focus(); // Assuming that there is an input field. If you wanna focus a non-input field then add tabindex=0 for that element and then focus it
});
其中 dialog 是 v-dialog Dom 元素
我正在对一个项目实施可访问性调整，我需要使仅使用键盘即可浏览页面成为可能。我在使用 vuetify 的 v-dialog 组件时遇到模态问题。当我尝试将页面的焦点更改为屏幕阅读器向用户宣布的模式中的内容时。我试过手动使用 Javascrípt document.getElementById('id').focus() 和 Vue $refs 像 this.$refs.dialog.focus() 但没有成功。控制台中没有出现错误，它只是不关注模态的内容。
我注意到 vuetify 将 role="document" 属性 添加到模态 div 但我不知道这是否是原因：
如何在模式中聚焦内容？
您必须等待对话框转换完成，然后在 JavaScript 中检测到转换完成，然后聚焦对话框中的第一个元素。
为此，您需要做的是检测我们触发的 CSS 过渡的结束并将焦点返回对话框中的第一个元素，如下所示：
dialog.addEventListener('transitionend', (e) => {
dialog.querySelector('input').focus(); // Assuming that there is an input field. If you wanna focus a non-input field then add tabindex=0 for that element and then focus it
});
其中 dialog 是 v-dialog Dom 元素