Estoy actualizando un formulario para que sea accesible desde el teclado. En la parte inferior del formulario hay un botón 'siguiente' que lleva al usuario a la página siguiente. El botón 'siguiente' no se vuelve a representar durante la navegación, solo cambia el contenido del formulario.
Cuando hago clic en mi botón Atrás, ejecuto una función handleSubmit:
<ButtonPrimary cypressTestId="sign-up-role-wizard-next-button" onClick={handleSubmit} text="NEXT" /> handleSubmit ejecuta una función de blur cerca del final de su lógica:
function handleSubmit() { const callback = ({ branch, rankType, role }) => { setRankType(rankType?.name); setUserInfo((prev) => ({ ...prev, branchId: branch?.name, role: role?.name, })); }; handleRoleWizardSubmit(callback); document.activeElement.blur(); } document.activeElement.blur() funciona como se esperaba y elimina el foco del botón 'siguiente' cuando se hace clic. Sin embargo, después de que el siguiente contenido del formulario se muestra, hacer clic en la pestaña pone el foco en mi pie de página. El foco se dirige al pie de página porque el botón 'siguiente' es el último elemento en el flujo de la pestaña de formularios. Entonces document.activeElement.blur() parece que está funcionando porque el anillo de enfoque se elimina, sin embargo, el orden de tabulación no se restablece.
En lugar de usar blur , simplemente configure el tabindex del formulario en -1 y focus . Aquí hay un ejemplo de Vanilla JS, que puede adaptar con una ref en React.
const form = document.querySelector('form'); document.querySelector('#next').addEventListener('click', (ev) => { // Instead of blurring: // ev.target.blur(); // Focus the form: form.focus({preventScroll: true}); }); button, form { border: 2px solid black; margin: 0.2rem; outline: none; } *:focus { border-color: red; } <form tabindex="-1"> <button id="next" type="button">Next</button> </form> <footer> <button>Unrelated button</button> </footer>