feat(keys): j/k and the arrows walk Home's rails and every Plex grid and rail
Second slice of the E11 keyboard layer (S4b). S4a gave the feed, the library and the channel page `j`/`k`, the arrows and Enter; Home's shelves and the whole Plex module were still Tab-stop country — a Plex poster is its own Tab stop, and a rail's cards sat behind every control of the cards before. - `lib/listNav`: a list that mounts every item no longer declares a count or columns — both are measured off the DOM when a key is pressed, so an auto-fill grid's columns follow its width and a rail is one row. ↑ on a list's top row and ↓ on its bottom row go on to the neighbouring list, onto the item horizontally nearest the one left (owner decision D4: ←→ within a rail, ↑↓ to the rail above or below). The first `j` skips cards a rail has scrolled out to the left. - `Carousel keyboardNav` registers the scroller; the scroller gets a 4px inset (against a -4px margin, layout unchanged) so the focus ring is not clipped, and `[data-nav-index]` a 2.5rem inline scroll margin so a card stepped into view clears the rail's edge fade and paging arrow. - `ui/NavGrid`: the plain, fully mounted grid that registers itself. - `navIndex` on PlexPosterCard / SeasonCard / EpisodeCard (the card root is the item, the poster the open element — the ring goes round poster and title, D2), PosterTile and Home's ShelfTile (the button is the item); cast, related and collection-strip buttons carry the attrs directly. - Wired: Home's comfort and resume rails; Plex Browse titles + episodes, Discover rails + genres, collection view, playlists/collections browse, person known-for + filmography, show seasons, season episodes, cast/related strips, info-page cast + collection strips. - `listNav.wiring.contract.test`: every `Carousel` says `keyboardNav`, every card says `navIndex`, and a card with `navIndex` sits inside a NavGrid / Carousel / VirtualGrid — both halves are opt-in, and either one missing leaves a list the keyboard silently skips.
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
// Every rail and every card of a card list is walkable by the keyboard (E11 S4, lib/listNav). Two
|
||||
// opt-in halves, both checked here, because either one missing silently leaves the keyboard out —
|
||||
// and a page where `j` walks two rails and skips the third reads as broken, not as unfinished:
|
||||
// - a `Carousel` says `keyboardNav`, and a card says `navIndex`;
|
||||
// - a card that says `navIndex` sits in a list that registers with listNav — a `NavGrid`, a
|
||||
// `Carousel`, or a `VirtualGrid` (its `renderItem`). In a plain `<div className="grid">` the card
|
||||
// is marked as an item of a list nobody walks.
|
||||
// Each exception is listed with its reason.
|
||||
//
|
||||
// The assertion pins the SET of offending tags, never a count, and checks the glob matched at all: a
|
||||
// guard whose glob stops matching is green over nothing (E10 review round 4, round 7).
|
||||
const RAIL = "Carousel";
|
||||
const CARDS = [
|
||||
"VideoCard",
|
||||
"PlexPosterCard",
|
||||
"SeasonCard",
|
||||
"EpisodeCard",
|
||||
"PosterTile",
|
||||
"ShelfTile",
|
||||
];
|
||||
const LISTS = ["NavGrid", "Carousel", "VirtualGrid"];
|
||||
|
||||
/** `path#tag#n` → why it is not a keyboard item. Empty today: every rail and card list is wired. */
|
||||
const EXEMPT: Record<string, string> = {};
|
||||
|
||||
interface Tag {
|
||||
start: number;
|
||||
end: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const stripComments = (source: string) =>
|
||||
source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:"'`])\/\/.*$/gm, "$1");
|
||||
|
||||
/** Each opening `<Name …>` tag, found by brace depth — a JSX attribute holds its own `>`
|
||||
* (`title={<span>…</span>}`, an arrow `=>`), so the first `>` is not the end of the tag. Takes
|
||||
* comment-free code, so the positions line up with `inList`. */
|
||||
export function openingTags(code: string, name: string): Tag[] {
|
||||
const tags: Tag[] = [];
|
||||
const start = new RegExp(`<${name}(?=[\\s/>])`, "g");
|
||||
for (let m = start.exec(code); m; m = start.exec(code)) {
|
||||
let depth = 0;
|
||||
let quote: string | null = null;
|
||||
let i = m.index + name.length + 1;
|
||||
for (; i < code.length; i++) {
|
||||
const c = code[i];
|
||||
if (quote) {
|
||||
if (c === quote) quote = null;
|
||||
} else if (depth === 0 && (c === '"' || c === "'")) quote = c;
|
||||
else if (c === "{") depth++;
|
||||
else if (c === "}") depth--;
|
||||
else if (c === ">" && depth === 0) break;
|
||||
}
|
||||
tags.push({ start: m.index, end: i + 1, text: code.slice(m.index, i + 1) });
|
||||
}
|
||||
return tags;
|
||||
}
|
||||
|
||||
/** Whether `pos` lies inside an open list element: between `<List …>` and `</List>`, or inside a
|
||||
* list's own tag (a `renderItem={…}` attribute). */
|
||||
export function inList(code: string, pos: number): boolean {
|
||||
return LISTS.some((name) => {
|
||||
let open = 0;
|
||||
for (const tag of openingTags(code, name)) {
|
||||
if (tag.start > pos) break;
|
||||
if (tag.end > pos) return true;
|
||||
if (!tag.text.endsWith("/>")) open++;
|
||||
}
|
||||
return open > code.slice(0, pos).split(`</${name}>`).length - 1;
|
||||
});
|
||||
}
|
||||
|
||||
const has = (tag: Tag, prop: string) => new RegExp(`\\s${prop}\\b`).test(tag.text);
|
||||
|
||||
function offenders(): { hits: string[]; tags: number } {
|
||||
const files = import.meta.glob("./**/*.tsx", { query: "?raw", import: "default", eager: true });
|
||||
const hits: string[] = [];
|
||||
let tags = 0;
|
||||
for (const [rel, source] of Object.entries(files)) {
|
||||
const path = rel.replace(/^\.\//, "components/");
|
||||
if (/\.test\.tsx$/.test(path)) continue;
|
||||
const code = stripComments(String(source));
|
||||
const report = (id: string, why: string) => {
|
||||
if (!(id in EXEMPT)) hits.push(`${id} ${why}`);
|
||||
};
|
||||
openingTags(code, RAIL).forEach((tag, n) => {
|
||||
tags++;
|
||||
if (!has(tag, "keyboardNav")) report(`${path}#${RAIL}#${n + 1}`, "no keyboardNav");
|
||||
});
|
||||
for (const name of CARDS) {
|
||||
openingTags(code, name).forEach((tag, n) => {
|
||||
tags++;
|
||||
const id = `${path}#${name}#${n + 1}`;
|
||||
if (!has(tag, "navIndex")) report(id, "no navIndex");
|
||||
else if (!inList(code, tag.start)) report(id, "not inside a NavGrid/Carousel/VirtualGrid");
|
||||
});
|
||||
}
|
||||
}
|
||||
return { hits: hits.sort(), tags };
|
||||
}
|
||||
|
||||
describe("the keyboard-list wiring contract", () => {
|
||||
it("has no rail or card list the keyboard cannot walk", () => {
|
||||
const { hits, tags } = offenders();
|
||||
expect(tags).toBeGreaterThan(15);
|
||||
expect(hits).toEqual([]);
|
||||
});
|
||||
|
||||
it("reads a tag to its real end, past the > inside its attributes", () => {
|
||||
const code = stripComments(`
|
||||
<Carousel
|
||||
title={<span className="x">{title}</span>}
|
||||
onSeeAll={() => go(1 > 0)}
|
||||
keyboardNav
|
||||
>
|
||||
// <Carousel keyboardNav> in a comment is no tag
|
||||
<Carousel ariaLabel="a > b">
|
||||
`);
|
||||
const tags = openingTags(code, "Carousel");
|
||||
expect(tags).toHaveLength(2);
|
||||
expect(has(tags[0]!, "keyboardNav")).toBe(true);
|
||||
expect(has(tags[1]!, "keyboardNav")).toBe(false);
|
||||
});
|
||||
|
||||
it("tells a card inside a list from one in a plain grid", () => {
|
||||
const code = `
|
||||
<NavGrid className="grid">{a.map((c, i) => <PosterTile navIndex={i} />)}</NavGrid>
|
||||
<div className="grid">{a.map((c, i) => <PosterTile navIndex={i} />)}</div>
|
||||
<VirtualGrid renderItem={(v, w, i) => <VideoCard navIndex={i} />} />
|
||||
`;
|
||||
const at = (n: number) => openingTags(code, "PosterTile")[n]!.start;
|
||||
expect(inList(code, at(0))).toBe(true);
|
||||
expect(inList(code, at(1))).toBe(false);
|
||||
expect(inList(code, openingTags(code, "VideoCard")[0]!.start)).toBe(true);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user