Focusing a heading on route change
A common accessible SPA pattern moves focus to the page heading, but this implementation silently fails.
Codejsx
function Page({ title }) {
const headingRef = useRef(null);
// Move focus to the heading after client-side navigation
// so screen reader users hear the new page context.
useEffect(() => {
headingRef.current?.focus();
}, [title]);
return (
<main>
<h1 ref={headingRef}>{title}</h1>
<p>Page content...</p>
</main>
);
}The focus is supposed to move to the heading after each route change, but screen readers never announce it. What is the bug?