fix(nav): Back restores the focus after a click on the page's blank area

The page region is <main tabIndex=-1>, so a background click focused it and the
Back restore took that for the reader's choice. A resting place is marked and
one predicate (focusIsUnclaimed) decides "the focus is nowhere" everywhere.
This commit is contained in:
2026-09-27 14:06:16 +02:00
parent 383c85231a
commit 9bedd96774
6 changed files with 45 additions and 11 deletions
+4 -2
View File
@@ -1,6 +1,6 @@
import { useCallback, useLayoutEffect, useRef, useState, type ReactNode } from "react";
import { useScrollFade } from "../../lib/useScrollFade";
import { useFocusKeeper } from "../../lib/useFocusKeeper";
import { FOCUS_REST_ATTRS, useFocusKeeper } from "../../lib/useFocusKeeper";
import { StickyTopProvider } from "./stickyTop";
import { CONTENT_ID } from "./landmarks";
import { ensureNavId, peekNavId, subscribeNav } from "../../lib/history";
@@ -158,11 +158,13 @@ export default function PageScroller({
return (
// `id` + `tabIndex={-1}`: the skip link's target (ui/SkipLink) takes the focus, so the next Tab
// lands on the page's first control.
// lands on the page's first control. A click on the page's background focuses it too, which is
// the focus RESTING, not a choice a Back restore must respect (`FOCUS_REST_ATTRS`).
<main
ref={setRef}
id={CONTENT_ID}
tabIndex={-1}
{...FOCUS_REST_ATTRS}
style={fade.style}
className="flex-1 min-w-0 overflow-y-auto scrollbar-gutter-stable focus:outline-none"
>