JavaScript return tab order to top of the page after blur event

Question

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.

Can you not simply set the focus to the first element of the newly loaded form? Plenty of ways here: https://stackoverflow.com/questions/28889826/how-to-set-focus-on-an-input-field-after-rendering — Michael Beeson, Jan 24 '22 at 15:21
I could, but preferably there just wouldn't be any element receiving focus on the new form page due to UI considerations. — Trevor Dammon, Jan 24 '22 at 15:35

score 5 · Accepted Answer · answered Jan 25 '22 at 16:52

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>

JavaScript return tab order to top of the page after blur event

1 Answers1