app/components/admin/media-keyboard.tsx

Functions

Imports

It imports app/lib/media/tile-nav.mjs. Imported by app/components/admin/media-grid.tsx.

Source

1import { useCallback } from "react";
2
3import { bands, nextTile } from "~/lib/media/tile-nav.mjs";
4
5/** The tile's tab stop in the grid: the thumbnail link, which carries the file's name. */
6function tileLink(key: string) {
7  return document.querySelector<HTMLElement>(
8    `.cap-media-grid [data-tile="${CSS.escape(key)}"] a.cap-media-open`,
9  );
10}
11
12/**
13 * The grid's keys, on the grid alone: they act only while focus is on a tile, so a key pressed on a
14 * button, a link or the inspector belongs to that control (WCAG 2.1.4). Focus is real and roves:
15 * one tile's controls are in the tab order, the arrows move focus to another tile, and the page
16 * renders that tile as the tab stop. Enter is the link's own. Rows come from rendered geometry, not a
17 * column model: `bands()` in tile-nav.mjs says why.
18 */
19export function useGridKeyboard({
20  setActive,
21  setSelected,
22}: {
23  setActive: (key: string) => void;
24  setSelected: (keys: string[]) => void;
25}) {
26  // Focus arriving on a tile by any route (Tab, a click, the inspector closing) makes it the stop.
27  const onFocus = useCallback(
28    (event: React.FocusEvent<HTMLElement>) => {
29      const key = (event.target as HTMLElement).closest("[data-tile]")?.getAttribute("data-tile");
30      if (key) setActive(key);
31    },
32    [setActive],
33  );
34
35  const onKeyDown = useCallback(
36    (event: React.KeyboardEvent<HTMLElement>) => {
37      if (event.metaKey || event.ctrlKey || event.altKey) return;
38      const tile = (event.target as HTMLElement).closest("[data-tile]");
39      const here = tile?.getAttribute("data-tile");
40      if (!tile || !here) return;
41
42      const move = (dir: "left" | "right" | "up" | "down") => {
43        event.preventDefault();
44        const rows = bands(
45          [...document.querySelectorAll(".cap-media-grid [data-tile]")].map((el) => {
46            const r = el.getBoundingClientRect();
47            return { id: el.getAttribute("data-tile") ?? "", top: r.top, left: r.left, width: r.width };
48          }),
49        );
50        const next = nextTile(rows, here, dir);
51        if (next === null) return;
52        setActive(next);
53        tileLink(next)?.focus();
54      };
55
56      if (event.key === "ArrowRight") move("right");
57      else if (event.key === "ArrowLeft") move("left");
58      else if (event.key === "ArrowDown") move("down");
59      else if (event.key === "ArrowUp") move("up");
60      else if (event.key === "Escape") {
61        // Through state: the grid owns the selection, and the boxes render from it.
62        event.preventDefault();
63        setSelected([]);
64      } else if (event.key === "x") {
65        // The real checkbox: the bulk form reads those, so a parallel model would select rows it never submits.
66        event.preventDefault();
67        const box = tile.querySelector("input[type=checkbox]");
68        if (box instanceof HTMLInputElement) box.click();
69      } else if (event.key === "c") {
70        event.preventDefault();
71        const button = tile.querySelector("[data-cap-copy]");
72        if (button instanceof HTMLButtonElement) button.click();
73      }
74    },
75    [setActive, setSelected],
76  );
77
78  return { onFocus, onKeyDown };
79}