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.
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The Hidden / Blocked channel cards as a keyboard list (E11 S4c): `j`/`k` walk the cards, Enter opens
|
|
// the channel — the ChannelLink name is the card's open element — and the card's own action button
|
|
// keeps its Enter.
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { act, cleanup, render, screen } from "@testing-library/react";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
|
|
});
|
|
|
|
import ExcludedChannelList from "./ExcludedChannelList";
|
|
|
|
afterEach(cleanup);
|
|
|
|
function press(key: string) {
|
|
act(() => {
|
|
(document.activeElement ?? document.body).dispatchEvent(
|
|
new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
|
|
);
|
|
});
|
|
}
|
|
|
|
const channels = [
|
|
{ id: "UCa", title: "Alpha", thumbnail_url: null },
|
|
{ id: "UCb", title: "Beta", thumbnail_url: null },
|
|
];
|
|
|
|
describe("ExcludedChannelList · keyboard", () => {
|
|
it("walks the cards with j/k and opens the channel on Enter", () => {
|
|
const onView = vi.fn();
|
|
render(
|
|
<ExcludedChannelList
|
|
channels={channels}
|
|
icon={null}
|
|
title="Hidden"
|
|
hint=""
|
|
emptyText=""
|
|
actionLabel="Unhide"
|
|
actionIcon={null}
|
|
onAction={() => {}}
|
|
onView={onView}
|
|
/>,
|
|
);
|
|
press("j");
|
|
press("j");
|
|
expect(document.activeElement?.textContent).toContain("Beta");
|
|
press("k");
|
|
expect(document.activeElement?.textContent).toContain("Alpha");
|
|
press("Enter");
|
|
expect(onView).toHaveBeenCalledWith(channels[0]);
|
|
expect(screen.getAllByRole("button", { name: "Unhide" })).toHaveLength(2);
|
|
});
|
|
});
|