a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll

[rosanusi]

Description

Fixes WCAG 2.2 SC 2.4.3 (Focus Order) for route-change navigation in src/routes/(app)/+layout.svelte.

The afterNavigate callback scrolled #content to the top but never moved keyboard focus. After every in-app navigation, focus fell to document.body — forcing keyboard users to Tab from the document beginning and depriving screen-reader users of any route-change announcement.

Fix: resolve #content once, reuse for both the existing scrollTo and a new focus({ preventScroll: true }) call.

 afterNavigate(() => {
-  document.getElementById('content')?.scrollTo(0, 0);
+  const main = document.getElementById('content');
+  main?.scrollTo(0, 0);
+  main?.focus({ preventScroll: true });
 });

preventScroll: true prevents the browser re-scrolling the element into view after our own scrollTo(0, 0) has already positioned it.

<main id="content" tabindex="-1"> is already present in src/lib/holocene/main-content-container.svelte (the dependency from 2.4.1-skip-link-target-focus.md is met).

Parallel fix: the identical change is applied to cloud-ui-main in a companion PR (the +layout.svelte route shell does not cascade via the @temporalio/ui tarball).

Screenshots

No visual change. Focus position changes after route transitions.

Design

N/A.

Testing

• Load the workflows list. Tab to a workflow row → press Enter → detail page loads. Press Tab once. Confirm focus is inside <main>, not at the skip-nav link.
• Namespace switch — confirm same behaviour.
• Command-palette navigation — activate a route via Cmd+K → confirm Tab lands inside <main> on the loaded page.
• Browser back button — navigate back, press Tab — confirm focus is inside <main>.
• Screen reader (VoiceOver): navigate between routes — confirm "main, region" is announced after each transition.
• Regression: #content is scrolled to top on each route change (existing scrollTo preserved).
• Regression: initial page load focus unchanged (SvelteKit default — afterNavigate does not fire on first load).

Checklist

• I have performed a self-review of my own code
• I have read the contributor guidelines

Docs

No documentation changes required.

A11y-Audit-Ref: 2.4.3-route-change-focus

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jun 25, 2026 4:41pm

[ardiewen]

Pushed two follow-up commits to harden the afterNavigate guard:

• Skip same-pathname query navs — the original unconditional focus() fired on every navigation, including updateQueryParameters calls (keepFocus: true). Filtering/sorting/paginating list views was yanking focus to <main>, defeating keepFocus.
• Skip the bootstrap redirect — type === 'enter' alone wasn't enough in OSS. The root route (/) renders <Loading /> and redirects to workflows via goto() in onMount, so afterNavigate fires twice on first load (enter on /, then goto from /). Guarding on from === '/' suppresses the focus-steal on the workflows landing page.

Final guard: skip enter, skip navs from === '/', skip same-pathname navs; focus <main> on genuine route changes.

Note: the description's "afterNavigate does not fire on first load" is inaccurate — it fires as enter, and again as goto via the onMount redirect. Worth updating so the three guard conditions read clearly.