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:
@@ -3,9 +3,9 @@
|
||||
// `lib/listNav` against real DOM: `j`/`k` from item to item and across lists in reading order, the
|
||||
// arrows around a grid, Enter as a click on the item's own "open" element — and the places where the
|
||||
// keys must stay out of the way (a field, an overlay, a control inside the card).
|
||||
import { useRef } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
|
||||
import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { navItemAttrs, useListNav } from "./listNav";
|
||||
import { pushLayer, removeLayer } from "./layerStack";
|
||||
|
||||
@@ -349,3 +349,83 @@ describe("useListNav · keys and lists it must leave alone", () => {
|
||||
expect(focused()).toBe("a1");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useListNav · the roving tabindex and a removed item (deep-review E11 round 1)", () => {
|
||||
// A tile that is a native <button> is a Tab stop already. A tabindex="-1" on it took it out of the
|
||||
// Tab order until the next `j` moved elsewhere: Shift+Tab back to a genre tile skipped it.
|
||||
it("leaves an item that is a Tab stop in its own right out of the tabindex it roves", () => {
|
||||
function Tiles() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useListNav(ref, { enabled: true });
|
||||
return (
|
||||
<div ref={ref}>
|
||||
{[0, 1].map((i) => (
|
||||
<button key={i} type="button" {...navItemAttrs(i)} data-testid={`t${i}`}>
|
||||
tile
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render(<Tiles />);
|
||||
press("j");
|
||||
expect(focused()).toBe("t0");
|
||||
expect(screen.getByTestId("t0").hasAttribute("tabindex")).toBe(false);
|
||||
press("j");
|
||||
expect(focused()).toBe("t1");
|
||||
expect(screen.getByTestId("t1").hasAttribute("tabindex")).toBe(false);
|
||||
});
|
||||
|
||||
// Landing again on the item that already holds the roved tabindex (focus went to <body> in between)
|
||||
// forgot it, so it kept tabindex="-1" for good — and a click on its blank area focused the card.
|
||||
it("gives the tabindex back after landing twice on the same item", () => {
|
||||
render(<List id="a" count={3} />);
|
||||
press("j");
|
||||
expect(focused()).toBe("a0");
|
||||
act(() => (document.activeElement as HTMLElement).blur());
|
||||
press("j");
|
||||
expect(focused()).toBe("a0");
|
||||
press("j");
|
||||
expect(focused()).toBe("a1");
|
||||
expect(screen.getByTestId("a0").hasAttribute("tabindex")).toBe(false);
|
||||
});
|
||||
|
||||
// Hiding the focused feed card unmounts it and drops focus to <body>; the next `j` started over at
|
||||
// the first visible card instead of going on from the hidden card's slot.
|
||||
it("goes on from the slot of an item that was removed under the focus", () => {
|
||||
function Removable() {
|
||||
const [ids, setIds] = useState([0, 1, 2, 3]);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useListNav(ref, { enabled: true });
|
||||
return (
|
||||
<div ref={ref}>
|
||||
{ids.map((id, i) => (
|
||||
<div key={id} {...navItemAttrs(i)} data-testid={`r${id}`}>
|
||||
<button
|
||||
data-testid={`r${id}-hide`}
|
||||
onClick={() => setIds((xs) => xs.filter((x) => x !== id))}
|
||||
>
|
||||
hide
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
withLayout(
|
||||
(_, n) => ({ left: 0, top: n * 100 }),
|
||||
() => {
|
||||
render(<Removable />);
|
||||
press("j");
|
||||
press("j");
|
||||
press("j");
|
||||
expect(focused()).toBe("r2");
|
||||
act(() => screen.getByTestId("r2-hide").focus());
|
||||
fireEvent.click(screen.getByTestId("r2-hide"));
|
||||
expect(document.activeElement).toBe(document.body);
|
||||
press("j");
|
||||
expect(focused()).toBe("r3");
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user