I am updating a form to be keyboard accessible. At the bottom of the form there is a 'next' button which navigates the user to the next page. The 'next' button does not rerender during navigation, only the form content changes.
When I click my back button I run a handleSubmit function:
<ButtonPrimary
cypressTestId="sign-up-role-wizard-next-button"
onClick={handleSubmit}
text="NEXT"
/>
The handleSubmit runs a blur function near the end of its logic:
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() is working as expected and removing the focus from the 'next' button when clicked. However after the next form content renders clicking tab puts focus on my footer. Focus is going to the footer because the 'next' button is the last element in the forms tab flow. So document.activeElement.blur() seems like it is working because the focus ring is removed however the tab order is not being reset.
Instead of using blur, just set the tabindex of the form to -1 and focus it. Here's a vanilla JS example, which you can adapt with a ref in 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>