This content originally appeared on Go Make Things and was authored by Go Make Things
One of the big things SPAs often mess up is focus management.
When a user moves from one page to the next on a classic server-rendered app or website, focus automatically shifts to the top of the document and the new page title is announced to screen readers.
SPA routers often break this, leaving visually impaired and keyboard users “stranded” in the middle of a page.
I recently worked on a project with React Router, which I thought handled this automatically, but for some reason was not in my app (not sure if it was a config issue or the behavior changed when they merged with Remix).
(Yes, this is a React tutorial. Hell has frozen over!)
There are a lot of ways to handle this, but in user testing, Marcy Sutton found that the generally most well received approach was the shift focus to the h1 heading on each route change.
This both puts the user back at the top of the page and announces the page title (assuming the h1 is useful) to screen readers.
I wrote a small little custom React hook for automating this in React Router.
import { useEffect } from 'react';
import { useLocation } from 'react-router';
/**
* Shifts focus to heading on route changes
* ReactRouter historically did this automatically, but seems to no longer do so
* @link https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/
*/
export function useFocusOnLocationChange () {
const location = useLocation();
useEffect(() => {
const h1 = document.querySelector('h1');
const tabIndex = h1?.getAttribute('tabindex');
h1?.setAttribute('tabindex', tabIndex ?? '-1');
h1?.focus();
}, [location]);
}
Inside whatever Component generates your page or app layout, run it to automatically handle focus shifts.
useFocusOnLocationChange();
I also added a little CSS to only show a focus ring around the heading for users who navigate by keyboard (or for whom the browser otherwise decides would benefit from it).
/**
* Only style programmatically focused elements if needed
* @link https://code.google.com/p/chromium/issues/detail?id=37721
*/
[tabindex="-1"]:focus {
outline: none;
}
[tabindex="-1"]:focus-visible {
outline: 2px solid var(--color-focus);
}I was skeptical about the :focus-visible pseudo-class, but it can be pretty damn useful!
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-05-02T14:30:00+00:00) Shifting focus on route change with React Router. Retrieved from https://www.scien.cx/2025/05/02/shifting-focus-on-route-change-with-react-router/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.