app/lib/admin/roving.mjs

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1/**
2 * The key map of a roving tabindex (APG toolbar, radio group and menu patterns): which item an arrow,
3 * Home or End moves to. Pure, so a node test can hold it; the components own focus and state.
4 *
5 * `axis` is the arrows that move: "horizontal" for a toolbar, "vertical" for a list, "both" for a
6 * radio group, where Down and Right go forward and Up and Left go back.
7 * Movement wraps, as the APG toolbar and radio group examples do.
8 *
9 * @param {string} key a KeyboardEvent `key`
10 * @param {number} at the index that has focus now
11 * @param {number} count how many items there are
12 * @param {"horizontal" | "vertical" | "both"} [axis]
13 * @returns {number | null} the index to move to, or null when the key is not a movement key
14 */
15export function rovingTarget(key, at, count, axis = "horizontal") {
16  if (count <= 0) return null;
17  const across = axis !== "vertical";
18  const down = axis !== "horizontal";
19  if ((across && key === "ArrowRight") || (down && key === "ArrowDown")) return (at + 1) % count;
20  if ((across && key === "ArrowLeft") || (down && key === "ArrowUp")) return (at - 1 + count) % count;
21  if (key === "Home") return 0;
22  if (key === "End") return count - 1;
23  return null;
24}