0
376
Views¿Cómo cambiar el enfoque del lector de pantalla para vuetificar modal una vez que se abre?
Estoy implementando ajustes de accesibilidad en un proyecto y necesito que sea posible navegar por la página usando solo el teclado. Tengo un problema con los modales al usar el componente v-dialog de vuetify. Cuando trato de cambiar el enfoque de la página al contenido dentro del modal para que los lectores de pantalla lo anuncien al usuario. Intenté enfocar manualmente con Javascrípt document.getElementById('id').focus() y con Vue $refs refs like this.$refs.dialog.focus() pero sin éxito. No aparece ningún error en la consola, simplemente no se enfoca en el contenido del modal.
Noté que vuetify agrega la propiedad role="document" a modal div pero no sé si esa es la causa: 
¿Cómo puedo enfocar el contenido dentro de modal?
1 answers
Answer question0
Debe esperar a que se complete la transición del cuadro de diálogo y luego detectar la finalización de la transición en JavaScript y luego enfocar el primer elemento en el cuadro de diálogo.
Para esto, lo que debe hacer es detectar el final de nuestra transición CSS desencadenada y volver a enfocar el primer elemento dentro del cuadro de diálogo, así:
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 }); donde dialog es el elemento v-dialog Dom