peter
b5d37ca142
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.
88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
// @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);
|
|
});
|
|
});
|