peter
8fb276aa90
A feed card cost ~10 Tab stops, so the tenth card sat ~135 Tabs from the top of the page, and the only keyboard focus ring (a 60% accent outline on the thumbnail) all but vanished on the dark glass. First slice of the E11 keyboard layer (S4a); Home, Plex and the tables follow in S4b/S4c. - `lib/listNav`: one window listener over every registered list, walked in document order. `j`/`k` step item to item (on into the next list — owner decision D4), the arrows move around a grid, Enter clicks the item's own `data-nav-open` element, so it opens exactly like a click. An item root is never a Tab stop: it gets `tabindex=-1` only while the keyboard is on it, and keeps it until the next item takes it, so the player's focus restore lands back on the card. The first `j` takes the first card you can see, not the top of the list. - `VirtualGrid` takes part with `keyboardNav` (column count + scrolling an unmounted row in); `VirtualFeed` turns it on, so the feed, the library and the channel page all have it. - Keymap: two-step sequences (`g h`) whose pending step belongs to the scope that started it; the page-level scopes (`page`, `search`, `list`) are quiet while a layer that owns the keyboard is open, enforced in `dispatch`. A test pins the owner's rule that none of them needs a modifier on the Hungarian layout. - `g h/f/c/p/x/n/m/d/s/,` jump to a module this account can reach; `s` focuses the header search box and selects the old query; Escape in it hands the keyboard back to the page (Plex's typeahead spends its first Escape on its panel). - Hover popovers are passive layers: an open tooltip still takes Escape first but no longer silences the page keys. - Focus ring (owner decision D2 = B): solid 2px accent around the whole item; the app-wide button/ link/row ring goes from 60% to solid too. The item keeps a transparent resting outline because the video card transitions `all` — without it every `j` flashed a 3px white ring (measured in Chrome). - Help sheet: the new keys, in a fixed order after the surface's own; a `g` chord only for a reachable module; opened over a player or dialog it leaves out the page-level keys and the context-menu key, which nothing can reach there (the latter pre-existing since E10). - CLAUDE.md: a canonical-patterns row for list/grid keys (`useListNav` + `navItemAttrs` + `data-nav-open`, not a private arrow-key handler).
95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The `page` scope as App binds it through `useGlobalKeymap`: the `g` chords jump to a module this
|
|
// account can reach, stay out of an overlay's way, and leave the global keys (Shift+W, h) intact.
|
|
// Its own file for the same reason as keymap.sequence.test.ts: a pending `g` is module state.
|
|
import { useEffect } from "react";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { act, cleanup, render } from "@testing-library/react";
|
|
import { closeKeyboardHelp, useGlobalKeymap, useKeyboardHelpOpen } from "./keymap";
|
|
import { pushLayer, removeLayer } from "./layerStack";
|
|
import type { Page } from "./urlState";
|
|
|
|
let clock = Date.UTC(2031, 0, 1);
|
|
beforeEach(() => {
|
|
vi.useFakeTimers({ toFake: ["Date"] });
|
|
clock += 3_600_000;
|
|
vi.setSystemTime(clock);
|
|
});
|
|
afterEach(() => {
|
|
cleanup();
|
|
closeKeyboardHelp();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
const ALL: Page[] = ["home", "feed", "channels", "playlists", "plex", "downloads", "settings"];
|
|
|
|
function Host({
|
|
onNavigate,
|
|
pages = ALL,
|
|
onHelp = () => {},
|
|
}: {
|
|
onNavigate: (p: Page) => void;
|
|
pages?: Page[];
|
|
onHelp?: (open: boolean) => void;
|
|
}) {
|
|
useGlobalKeymap(true, onNavigate, pages);
|
|
const help = useKeyboardHelpOpen();
|
|
useEffect(() => {
|
|
onHelp(help);
|
|
}, [help, onHelp]);
|
|
return null;
|
|
}
|
|
|
|
const key = (init: KeyboardEventInit) =>
|
|
act(() => {
|
|
window.dispatchEvent(
|
|
new KeyboardEvent("keydown", { bubbles: true, cancelable: true, ...init }),
|
|
);
|
|
});
|
|
|
|
describe("the g chords", () => {
|
|
it("jump to the module named by the second key", () => {
|
|
const nav = vi.fn();
|
|
render(<Host onNavigate={nav} />);
|
|
key({ key: "f" });
|
|
expect(nav).not.toHaveBeenCalled();
|
|
key({ key: "g" });
|
|
key({ key: "f" });
|
|
key({ key: "g" });
|
|
key({ key: "," });
|
|
expect(nav.mock.calls).toEqual([["feed"], ["settings"]]);
|
|
});
|
|
|
|
// `h` alone opens the sheet; the `h` of `g h` must not ALSO do that.
|
|
it("take the h of g h away from the help sheet", () => {
|
|
const nav = vi.fn();
|
|
let help = false;
|
|
render(<Host onNavigate={nav} onHelp={(v) => (help = v)} />);
|
|
key({ key: "g" });
|
|
key({ key: "h" });
|
|
expect(nav).toHaveBeenCalledWith("home");
|
|
expect(help).toBe(false);
|
|
});
|
|
|
|
it("refuse a module this account cannot reach", () => {
|
|
const nav = vi.fn();
|
|
render(<Host onNavigate={nav} pages={["home", "feed"]} />);
|
|
key({ key: "g" });
|
|
key({ key: "x" });
|
|
expect(nav).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("stand aside for an overlay, while Shift+W still answers there", () => {
|
|
const nav = vi.fn();
|
|
render(<Host onNavigate={nav} />);
|
|
const id = pushLayer();
|
|
key({ key: "g" });
|
|
key({ key: "f" });
|
|
expect(nav).not.toHaveBeenCalled();
|
|
key({ key: "w", shiftKey: true });
|
|
expect(nav).toHaveBeenCalledWith("home");
|
|
removeLayer(id);
|
|
});
|
|
});
|