Roving tabindex for Radio and Checkbox Groups

interface OptionState {
  index: number;    // position within the group
  checked: boolean; // selection state
  disabled: boolean;
}

type GroupKind = "radio" | "checkbox";

class RovingGroup {
  private options: HTMLElement[];

  /**
   * WeakMap keyed by the option element. Chosen over a Map or a data-*
   * attribute because when an option node is removed from the DOM and
   * dropped elsewhere, its entry becomes unreachable and is garbage-
   * collected automatically — no manual delete(), no leak if the group
   * re-renders. State also stays off the DOM, so mutating `checked` does
   * not fire attribute observers or reflow on every arrow keypress.
   */
  private state = new WeakMap<HTMLElement, OptionState>();

  private activeIndex = 0;

  constructor(
    private group: HTMLElement,
    private kind: GroupKind,
    private onChange: (checked: HTMLElement[]) => void
  ) {
    this.options = Array.from(
      group.querySelectorAll<HTMLElement>('[role="radio"], [role="checkbox"]')
    );
    this.options.forEach((el, index) => {
      this.state.set(el, {
        index,
        checked: el.getAttribute("aria-checked") === "true",
        disabled: el.getAttribute("aria-disabled") === "true",
      });
    });
    // Initial roving position: the checked option, or the first enabled one.
    this.activeIndex = Math.max(0, this.options.findIndex((el) => this.state.get(el)?.checked));
    this.syncTabindex();
    group.addEventListener("keydown", this.onKeydown);
    group.addEventListener("click", this.onClick);
  }

  /** Exactly one option gets tabindex 0; all others get -1. */
  private syncTabindex(): void {
    this.options.forEach((el, i) => {
      el.tabIndex = i === this.activeIndex ? 0 : -1;
    });
  }

  private moveTo(index: number, opts: { select: boolean }): void {
    const target = this.options[index];
    if (!target || this.state.get(target)?.disabled) return;
    this.activeIndex = index;
    this.syncTabindex();
    target.focus(); // the newly-tabbable option receives focus
    if (opts.select) this.select(target, true);
  }

  /** Next/previous enabled option, wrapping around the ends. */
  private step(delta: 1 | -1): number {
    const n = this.options.length;
    let i = this.activeIndex;
    for (let c = 0; c < n; c++) {
      i = (i + delta + n) % n;
      if (!this.state.get(this.options[i])?.disabled) return i;
    }
    return this.activeIndex;
  }

  private onKeydown = (e: KeyboardEvent): void => {
    switch (e.key) {
      case "ArrowDown":
      case "ArrowRight":
        e.preventDefault();
        // Radios select on move; checkboxes only move focus.
        this.moveTo(this.step(1), { select: this.kind === "radio" });
        break;
      case "ArrowUp":
      case "ArrowLeft":
        e.preventDefault();
        this.moveTo(this.step(-1), { select: this.kind === "radio" });
        break;
      case "Home":
        e.preventDefault();
        this.moveTo(this.firstEnabled(), { select: this.kind === "radio" });
        break;
      case "End":
        e.preventDefault();
        this.moveTo(this.lastEnabled(), { select: this.kind === "radio" });
        break;
      case " ": // Space toggles the focused checkbox; confirms a radio.
        e.preventDefault();
        this.select(this.options[this.activeIndex], this.kind === "checkbox" ? "toggle" : true);
        break;
    }
  };

  private onClick = (e: MouseEvent): void => {
    const option = (e.target as HTMLElement).closest<HTMLElement>('[role="radio"], [role="checkbox"]');
    if (!option || this.state.get(option)?.disabled) return;
    this.moveTo(this.state.get(option)!.index, { select: false });
    this.select(option, this.kind === "checkbox" ? "toggle" : true);
  };

  private select(el: HTMLElement, mode: boolean | "toggle"): void {
    const st = this.state.get(el);
    if (!st || st.disabled) return;
    if (this.kind === "radio") {
      // Single selection: clear the rest, set this one.
      this.options.forEach((o) => {
        const s = this.state.get(o)!;
        s.checked = o === el;
        o.setAttribute("aria-checked", String(s.checked));
      });
    } else {
      st.checked = mode === "toggle" ? !st.checked : Boolean(mode);
      el.setAttribute("aria-checked", String(st.checked));
    }
    this.onChange(this.options.filter((o) => this.state.get(o)!.checked));
  }

  private firstEnabled(): number {
    return this.options.findIndex((el) => !this.state.get(el)?.disabled);
  }
  private lastEnabled(): number {
    for (let i = this.options.length - 1; i >= 0; i--) {
      if (!this.state.get(this.options[i])?.disabled) return i;
    }
    return 0;
  }

  destroy(): void {
    this.group.removeEventListener("keydown", this.onKeydown);
    this.group.removeEventListener("click", this.onClick);
    // No need to clear the WeakMap: dropping the RovingGroup reference makes
    // every entry unreachable, and the GC reclaims them with the elements.
  }
}

// WRONG — all options tabbable, Tab stops on every one
options.forEach((el) => (el.tabIndex = 0));

// RIGHT — exactly one tab stop that roves with focus
options.forEach((el, i) => (el.tabIndex = i === activeIndex ? 0 : -1));