[英]How to change screen reader focus to vuetify modal once it opens?
I'm implementing adjustments for accessibility on a project and I need to make it possible to navigate through the page using only the keyboard.我正在对项目的可访问性进行调整,我需要能够仅使用键盘浏览页面。 I am experiencing a problem with modals using the vuetify's v-dialog component.我在使用 vuetify 的 v-dialog 组件时遇到了模态问题。 When I try to change the focus of the page to the content within the modal for screen readers to announce to the user.当我尝试将页面的焦点更改为模式中的内容以便屏幕阅读器向用户宣布时。 I've tried manually focus with Javascrípt document.getElementById('id').focus()
and with Vue $refs
like this.$refs.dialog.focus()
but no success.我已经尝试使用 Javascrípt document.getElementById('id').focus()
和 Vue $refs
like this.$refs.dialog.focus()
手动聚焦,但没有成功。 No error appears in the console, it just doesn't focus on the contents of the modal.控制台中没有出现错误,只是不关注模态的内容。
I noticed that vuetify add the role="document"
property to modal div but I don't know if that is the cause: Vuetify's v-dialog component add property role="document"我注意到 vuetify 将role="document"
属性添加到模态 div 但我不知道这是否是原因: Vuetify 的 v-dialog 组件添加属性 role="document"
How can I focus content within modal?如何在模态内聚焦内容?
You got to wait for the dialog box transition to complete and then detect that transition completion in JavaScript followed by focussing the first element in the dialog.您必须等待对话框转换完成,然后在 JavaScript 中检测转换完成,然后聚焦对话框中的第一个元素。
For this, what you need to do is detect the end of our triggered CSS transition and focus back the first element inside the dialog, like so:为此,您需要做的是检测我们触发的 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
});
where dialog
is the v-dialog Dom element其中dialog
是 v-dialog Dom 元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.