fix(keys): epic-end review round 1 — Back, menus and dialogs keep the focus where it belongs
Deep-review of E11 (19 raised, 14 confirmed; 2 refuted, 3 latent test-hardening notes dropped). - Back from a sub-view (a Plex show page, a Messages thread) restores the item it was opened from even when focus was still inside the view: the first attempt now waits one task, past the sub-view's own popstate listener (measured in Chrome: it left focus on <body>). - The restore listener is installed at load, so the first Back after a reload finds it; a push cancels a restore still waiting for the last landing's lists. - Navigating over an overlay asks it again, a render apart, while its entry stays: the Plex player peels one panel per Back step, so Shift+W over info + stats closed one panel and dropped the navigation. - j/k: a native <button> item keeps its own Tab stop; landing twice on the same item no longer leaks its tabindex; after the focused item is removed (a hidden card) the next j goes on from its slot when that slot is on screen. - An abandoned `g` no longer swallows a modifier chord (g, then Mod+K opened the browser search). - A hover card above a dialog no longer switches its Tab trap off (player, Modal, wizard, Lightbox): new layerStack `anyBlockingLayerAbove`. - "Manage views…" closes its menu before opening the dialog, through a shared `closeThenAct` that ActionMenu now uses too. - Copy: the EN welcome says "Feed"; the EN unreachable reason no longer claims a change; stale comments about PlayerModal's scroll lock and dialog contract.
This commit is contained in:
@@ -69,11 +69,10 @@ export function subscribeNav(cb: () => void): () => void {
|
||||
// See lib/listNav "The item a view was left from". Stamped onto the entry being LEFT, right before a
|
||||
// push opens a new view over it; read when Back/Forward lands on that entry, and dropped from it there,
|
||||
// so a later landing on the same entry — an overlay closing over it — cannot pull focus to an old item.
|
||||
// Installed at load, not by the first push: a stamp survives a reload in history.state, and the first
|
||||
// Back after one must still find a listener (deep-review E11 round 1).
|
||||
let cancelNavRestore = () => {};
|
||||
let navRestoreInstalled = false;
|
||||
function ensureNavRestore(): void {
|
||||
if (navRestoreInstalled) return;
|
||||
navRestoreInstalled = true;
|
||||
if (typeof window !== "undefined") {
|
||||
window.addEventListener("popstate", (e) => {
|
||||
cancelNavRestore();
|
||||
const pos = (e.state as { sfNav?: NavPosition } | null)?.sfNav;
|
||||
@@ -88,7 +87,9 @@ function ensureNavRestore(): void {
|
||||
* channel, a tab). Returns the current state WITHOUT the stamp: a push that spreads the current state
|
||||
* must spread this, so the new entry does not inherit a position it was never left from. */
|
||||
export function rememberNavPosition(): Record<string, unknown> {
|
||||
ensureNavRestore();
|
||||
// A restore still waiting for the last landing's lists belongs to the page being left: left
|
||||
// running, it would focus "list N, item M" of whatever page this push opens.
|
||||
cancelNavRestore();
|
||||
const { sfNav: _stale, ...st } = (window.history.state ?? {}) as Record<string, unknown>;
|
||||
const pos = navPosition();
|
||||
window.history.replaceState(pos ? { ...st, sfNav: pos } : st, "");
|
||||
@@ -251,6 +252,11 @@ function historyInSync(): boolean {
|
||||
// render (measured back()→popstate: 1–13 ms in Chrome); nothing in the app refuses a close today,
|
||||
// but a future "discard your changes?" guard must not be navigated out from under.
|
||||
const CLOSE_TIMEOUT_MS = 1500;
|
||||
// An overlay's Back callback is a Back STEP, and one entry can hold several steps: the Plex player's
|
||||
// panels share a single entry and Back peels one per press. Navigating over it asks again, a render
|
||||
// apart (the callback reads what the last one closed), until the entry is gone or the timeout drops
|
||||
// the command.
|
||||
const RECLOSE_MS = 50;
|
||||
|
||||
/** Close `targets` (via `close`), then `run` once they have unmounted AND the history has caught up.
|
||||
*
|
||||
@@ -267,7 +273,12 @@ const CLOSE_TIMEOUT_MS = 1500;
|
||||
* `run` goes out on a fresh task, never inside the popstate dispatch that settled it: listeners
|
||||
* registered before ours (NavigationProvider's) have read that event already, but ones after it
|
||||
* have not, and a page applied from the OLD entry after our push would undo the navigation. */
|
||||
function afterClosing(targets: readonly Overlay[], close: () => void, run: () => void): void {
|
||||
function afterClosing(
|
||||
targets: readonly Overlay[],
|
||||
close: () => void,
|
||||
run: () => void,
|
||||
reclose = false,
|
||||
): void {
|
||||
let done = false;
|
||||
let queued = false;
|
||||
const gone = () => targets.every((o) => !overlayStack.includes(o));
|
||||
@@ -277,7 +288,13 @@ function afterClosing(targets: readonly Overlay[], close: () => void, run: () =>
|
||||
syncWaiters.delete(check);
|
||||
window.removeEventListener("popstate", check);
|
||||
clearTimeout(timeout);
|
||||
clearInterval(again);
|
||||
};
|
||||
const again = reclose
|
||||
? setInterval(() => {
|
||||
if (!done && !gone()) close();
|
||||
}, RECLOSE_MS)
|
||||
: undefined;
|
||||
function check(): void {
|
||||
if (queued || !ready()) return;
|
||||
queued = true;
|
||||
@@ -318,7 +335,12 @@ export function closeOverlaysThenNavigate(navigate: () => void): void {
|
||||
return;
|
||||
}
|
||||
const targets = [...overlayStack];
|
||||
afterClosing(targets, () => [...targets].reverse().forEach((o) => o.cb()), navigate);
|
||||
const close = () =>
|
||||
[...targets]
|
||||
.reverse()
|
||||
.filter((o) => overlayStack.includes(o))
|
||||
.forEach((o) => o.cb());
|
||||
afterClosing(targets, close, navigate, true);
|
||||
}
|
||||
|
||||
/** Close the overlay a control lives in, then run its command once that overlay's entry is back —
|
||||
|
||||
Reference in New Issue
Block a user