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).
90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// E11 S4: the video card's half of keyboard navigation (`lib/listNav`). Every layout's ROOT carries the
|
|
// list index — that is the element `j`/`k` focus and ring — and the title link is the card's `open`
|
|
// element, so Enter on a selected card runs the very click a mouse would: the in-app player.
|
|
import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { cleanup, render, screen } from "@testing-library/react";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => ({
|
|
...(await importOriginal<typeof import("react-i18next")>()),
|
|
useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
|
|
}));
|
|
vi.mock("./NavigationProvider", () => ({
|
|
useNavigationActions: () => ({ openChannel: vi.fn() }),
|
|
}));
|
|
|
|
import VideoCard from "./VideoCard";
|
|
import type { Video } from "../lib/api";
|
|
import type { FeedView } from "../lib/feedView";
|
|
|
|
beforeAll(() => {
|
|
class Stub {
|
|
observe() {}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
takeRecords() {
|
|
return [];
|
|
}
|
|
}
|
|
globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
|
|
globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
|
|
});
|
|
|
|
const video = {
|
|
id: "abc123",
|
|
title: "Cicada 3301",
|
|
channel_id: "UCsXVk37bltHxD1rDPwtNM8Q",
|
|
channel_title: "LEMMiNO",
|
|
status: "new",
|
|
saved: false,
|
|
position_seconds: 0,
|
|
duration_seconds: 1200,
|
|
published_at: "2026-01-01T00:00:00Z",
|
|
watch_url: "https://www.youtube.com/watch?v=abc123",
|
|
thumbnail_url: "",
|
|
} as unknown as Video;
|
|
|
|
beforeEach(cleanup);
|
|
|
|
function renderCard(view: FeedView, navIndex?: number, onOpen = vi.fn()) {
|
|
render(
|
|
<QueryClientProvider client={new QueryClient()}>
|
|
<VideoCard
|
|
video={video}
|
|
view={view}
|
|
width={0}
|
|
navIndex={navIndex}
|
|
onState={() => {}}
|
|
onToggleSave={() => {}}
|
|
onOpen={onOpen}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
return onOpen;
|
|
}
|
|
|
|
// One per layout FAMILY: the stacked card, the thumbnailed row, the one-line row — three roots.
|
|
const VIEWS: FeedView[] = ["cards", "rows", "rowsCompact"];
|
|
|
|
describe("VideoCard — keyboard navigation hooks", () => {
|
|
for (const view of VIEWS) {
|
|
it(`puts the list index on the ${view} root and opens in-app from the title`, () => {
|
|
const onOpen = renderCard(view, 7);
|
|
const root = screen.getByTestId("video-card");
|
|
expect(root.getAttribute("data-nav-index")).toBe("7");
|
|
const open = root.querySelectorAll("[data-nav-open]");
|
|
expect(open).toHaveLength(1);
|
|
expect(open[0]!.textContent).toBe("Cicada 3301");
|
|
(open[0] as HTMLElement).click();
|
|
expect(onOpen).toHaveBeenCalledWith(video);
|
|
});
|
|
}
|
|
|
|
it("carries no index outside a navigable list (Home's rails)", () => {
|
|
renderCard("cards");
|
|
expect(screen.getByTestId("video-card").hasAttribute("data-nav-index")).toBe(false);
|
|
});
|
|
});
|