0
189
ViewsReaccionar cambiar el enfoque en el cambio de ruta
Soy muy nuevo en React y Javascript, pero espero que alguien pueda ofrecer ideas sobre cómo cambiar de manera confiable el enfoque del teclado en un cambio de ruta. A continuación, al seleccionar cualquiera de los elementos del menú (el cuadro verde es un ejemplo) en el lado izquierdo, se produce un cambio en la pantalla principal (cuadro naranja), pero el enfoque del teclado permanece en el lado izquierdo después de presionar Intro.
Lo que estoy tratando de lograr es que el enfoque del teclado cambie a ser el texto resaltado (cuadro azul), brindando así una mejor experiencia desde el punto de vista de la usabilidad. Habiendo buscado en Google, creo que el comando para lograr esto es uno de los siguientes:
document.getElementById('content-container').focus(); document.getElementById('reviews-in-progress-title').focus();siendo los Id. indicados los de los cuadros azules en las herramientas de depuración. Representan la pantalla principal y el elemento específico, respectivamente, sin embargo, ninguno logra el efecto deseado.
Lo que puedo lograr es cambiar el enfoque al elemento resaltado en el cuadro rojo usando lo siguiente:
document.getElementById('sortable-column-manuscriptTitle').focus();Entonces, mi pregunta para el piso es: ¿por qué puedo cambiar el enfoque al cuadro rojo, pero no al azul? Parece que este será un problema bastante común (y resuelto/entendido), pero actualmente no puedo resolverlo. Cualquier aporte recibido con gratitud.
gracias, phil
1 answers
Answer question0
Algunos navegadores no permitirán que el foco se mueva a un elemento si no es un elemento interactivo. En el cuadro azul, tiene un <h1> , que no se puede enfocar de forma nativa. En el cuadro rojo, tiene un <buton> , que se puede enfocar.
Para evitarlo, agregue tabindex="-1" a <h1> .
Esto permitirá que el foco se mueva a un elemento no interactivo a través de JS, pero no permitirá que el usuario pueda tabularlo .
Ahora, habiendo dicho eso, en general no deberías mover el enfoque del usuario a menos que haya una muy buena razón para ello. Mencionaste que querías hacerlo por un
"mejor experiencia desde el punto de vista de la usabilidad"
Como usuario de solo teclado, me parecería una experiencia peor. Si soy un nuevo usuario de la aplicación y quisiera explorar el menú LHS para ver qué hay disponible, iría al menú con la pestaña , presionaría Intro o espacio para seleccionar el menú y luego vería lo que aparece a la derecha. Luego me gustaría pasar al siguiente elemento del menú y seleccionarlo para ver qué aparece, pero movió mi enfoque hacia la derecha, así que ahora tengo que cambiar + tabulador hasta el menú. Si estuviera usando un dispositivo para sorber y soplar u otra tecnología de asistencia en lugar de un teclado, sería un gran esfuerzo.
Entonces, su intención es buena, pero podría causar muchas dificultades para algunos usuarios. Es por eso que recomiendo no mover el enfoque del usuario a menos que haya una muy, muy buena razón para hacerlo.
Por supuesto, se puede hacer el argumento opuesto. Si el foco no se mueve, el usuario de sorber y soplar tendrá que navegar hasta el lado derecho para interactuar con lo que aparece.
Debe investigar un poco para ver qué podría beneficiar a la mayoría de los usuarios sin afectar negativamente a otros usuarios.