feat(keys): j/k and the arrows walk the channel, playlist and download lists

Third and last slice of the E11 keyboard layer (S4c). S4a/S4b covered every card grid and rail; the table-shaped pages — the channel manager, a playlist, the download center — were still Tab-stop country: a channel row carries a priority stepper, four action buttons and a tag picker before the next row's name. - `ui/DataTable keyboardNav`: the rows are the items, Enter clicks the element a column marks `data-nav-open`. DataTable renders its rows twice (a table, and a card list below `md`); both register and `lib/listNav` now walks only lists on screen (`checkVisibility`), so `j` past the last row never carries on into the hidden copy. - `lib/listNav` leaves a key something before it already handled (`defaultPrevented`): during a keyboard drag a playlist row's grip moves the row with the arrows, and dnd-kit takes the key on the document before listNav's window listener. Without the guard ↓ moved the focus off the grip and dropped the drag. - `ui/NavGrid as="tbody"` for a table whose body is the list (the playlist, under dnd-kit's SortableContext). - Wired: Subscriptions and Discovery tables, the card layout (`ChannelLayoutGrid` → VirtualGrid `keyboardNav`), Hidden/Blocked cards (the ChannelLink name is a channel's open element); a playlist's rows (the title plays; the grip keeps Space/Enter); the download queue, library and shared lists (the play button opens, `IconBtn open`; a row without one opens nothing). - `listNav.wiring.contract.test`: `VirtualGrid` and `DataTable` must say `keyboardNav` like `Carousel`, `DownloadRow` is a card; the audit log's table is the one exemption (its rows open nothing), and an exemption that no longer matches a tag fails the test. Measured in Chrome: Channels table j → row, ring round the whole row; a row walked down keeps 12px above the viewport edge, walked up clears the sticky header by 35px; Enter opens the channel. Cards 3 columns: → 0→1, ↓ 1→4. Hidden and Discovery: j + Enter open the channel. Playlist: j + Enter plays, Escape returns focus to the row; a keyboard drag (Enter on the grip, ↓) moves the row with focus kept on the grip, and Escape cancels with the order unchanged. Downloads library: Enter plays a video row, does nothing on a plain file row.
2026-09-13 06:08:05 +02:00
parent eb0507f942
commit b5d37ca142
20 changed files with 456 additions and 62 deletions
@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+//
+// DataTable's `keyboardNav` (E11 S4c): the rows are a keyboard list — `j`/`k` walk them and Enter
+// clicks the element a column marks `data-nav-open`. The table renders its rows twice (a table and,
+// below `md`, a card list); only the copy on screen may be walked, or `j` past the last row would carry
+// on into the hidden one.
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, render } from "@testing-library/react";
+import DataTable, { type Column } from "./DataTable";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
+});
+
+afterEach(cleanup);
+
+type Row = { id: string };
+const rows: Row[] = [{ id: "a" }, { id: "b" }];
+
+function table(onOpen: (id: string) => void, keyboardNav = true) {
+  const columns: Column<Row>[] = [
+    {
+      key: "name",
+      header: "Name",
+      cardPrimary: true,
+      render: (r) => (
+        <button data-nav-open="" onClick={() => onOpen(r.id)}>
+          {r.id}
+        </button>
+      ),
+    },
+    { key: "act", header: "", render: (r) => <button>act {r.id}</button> },
+  ];
+  return render(
+    <DataTable rows={rows} columns={columns} rowKey={(r) => r.id} keyboardNav={keyboardNav} />,
+  );
+}
+
+function press(key: string) {
+  act(() => {
+    (document.activeElement ?? document.body).dispatchEvent(
+      new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+    );
+  });
+}
+
+/** What a display:none copy answers in a browser; jsdom lays nothing out, so every copy is "visible". */
+const offScreen = (el: Element | null) =>
+  Object.defineProperty(el!, "checkVisibility", { value: () => false, configurable: true });
+
+/** The focused row: which copy (TR / DIV) and which row. */
+const focused = () => {
+  const el = document.activeElement as HTMLElement;
+  return `${el.tagName} ${el.querySelector("[data-nav-open]")?.textContent ?? ""}`;
+};
+
+describe("DataTable · keyboardNav", () => {
+  it("walks the table's rows, stops at the last one, and opens a row on Enter", () => {
+    const opened: string[] = [];
+    const { container } = table((id) => opened.push(id));
+    offScreen(container.querySelector(".md\\:hidden"));
+    press("j");
+    expect(focused()).toBe("TR a");
+    press("j");
+    expect(focused()).toBe("TR b");
+    // The hidden card copy follows the table in the DOM — it must not be the next stop.
+    press("j");
+    expect(focused()).toBe("TR b");
+    press("Enter");
+    expect(opened).toEqual(["b"]);
+  });
+
+  it("walks the card copy when that is the one on screen", () => {
+    const { container } = table(() => {});
+    offScreen(container.querySelector("tbody"));
+    press("j");
+    expect(focused()).toBe("DIV a");
+  });
+
+  it("leaves the rows out of the keyboard without keyboardNav", () => {
+    const { container } = table(() => {}, false);
+    expect(container.querySelector("[data-nav-index]")).toBeNull();
+    press("j");
+    expect(document.activeElement).toBe(document.body);
+  });
+});