Hooks

import { useId } from "@compa11y/react";

function LabeledInput({ label }) {
  const id = useId("input");

  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

import { useIds } from "@compa11y/react";

function Combobox() {
  const ids = useIds(["input", "listbox", "label"] as const, "combo");
  // ids.input, ids.listbox, ids.label — all unique and related

  return (
    <>
      <label id={ids.label}>Search</label>
      <input
        id={ids.input}
        role="combobox"
        aria-controls={ids.listbox}
        aria-labelledby={ids.label}
      />
      <ul id={ids.listbox} role="listbox" />
    </>
  );
}

import { useIdScope } from "@compa11y/react";

function Dialog() {
  const ids = useIdScope("dialog");
  const titleId = ids.generate("title");
  const descId = ids.generate("description");

  return (
    <div
      id={ids.id}
      role="dialog"
      aria-labelledby={titleId}
      aria-describedby={descId}
    >
      <h2 id={titleId}>Title</h2>
      <p id={descId}>Description</p>
    </div>
  );
}

import { useFocusTrap } from "@compa11y/react";

function Modal({ isOpen, onClose }) {
  const trapRef = useFocusTrap<HTMLDivElement>({
    active: isOpen,
    onDeactivate: onClose,
    escapeDeactivates: true,
    returnFocus: true,
  });

  return (
    <div ref={trapRef} role="dialog" aria-modal="true">
      <button onClick={onClose}>Close</button>
      <p>Trapped content</p>
    </div>
  );
}

import { useFocusTrapControls } from "@compa11y/react";

function Drawer({ open }) {
  const { ref, activate, deactivate, isActive } = useFocusTrapControls();

  useEffect(() => {
    if (open) activate();
    else deactivate();
  }, [open]);

  return <div ref={ref}>{/* drawer content */}</div>;
}

import { useFocusVisible } from "@compa11y/react";

function CustomButton({ children }) {
  const { isFocusVisible, focusProps } = useFocusVisible();

  return (
    <button
      {...focusProps}
      className={isFocusVisible ? "focus-ring" : ""}
    >
      {children}
    </button>
  );
}

import { useFocusManager } from "@compa11y/react";

function InlineEditor() {
  const ref = useFocusManager({ autoFocus: true, restoreFocus: true });

  return <input ref={ref} />;
}

import { useFocusControl } from "@compa11y/react";

function Notification({ message }) {
  const { ref, focus } = useFocusControl<HTMLButtonElement>();

  useEffect(() => {
    focus({ visible: true }); // Focus with keyboard-style ring
  }, []);

  return <button ref={ref}>{message}</button>;
}

import { useFocusWithin } from "@compa11y/react";

function SearchGroup() {
  const { ref, hasFocus, focusWithinProps } = useFocusWithin<HTMLDivElement>();

  return (
    <div
      ref={ref}
      {...focusWithinProps}
      className={hasFocus ? "active-group" : ""}
    >
      <input />
      <button>Search</button>
    </div>
  );
}

import { useFocusNeighbor } from "@compa11y/react";

function RemovableItem({ item, onRemove }) {
  const { ref, focusNeighbor } = useFocusNeighbor<HTMLLIElement>();

  const handleRemove = () => {
    focusNeighbor(); // Move focus before removal
    onRemove(item.id);
  };

  return (
    <li ref={ref}>
      {item.label}
      <button onClick={handleRemove}>Remove</button>
    </li>
  );
}

import { useFocusReturn } from "@compa11y/react";

function ModalFlow() {
  const { save, returnFocus } = useFocusReturn();

  const openModal = () => {
    save(); // Remember current focus (e.g., the trigger button)
    showModal();
  };

  const closeModal = () => {
    hideModal();
    returnFocus(); // Go back to trigger — or its neighbor if disabled
  };
}

import { useKeyboard } from "@compa11y/react";

function Listbox() {
  const { onKeyDown } = useKeyboard({
    ArrowDown: () => focusNext(),
    ArrowUp: () => focusPrevious(),
    Enter: () => selectItem(),
    Escape: () => close(),
    "Ctrl+A": () => selectAll(),
    Space: () => toggleItem(), // Use 'Space' not ' '
  });

  return <ul onKeyDown={onKeyDown} role="listbox">{/* ... */}</ul>;
}

import { useMenuKeyboard } from "@compa11y/react";

function Menu({ items }) {
  const { onKeyDown } = useMenuKeyboard({
    onDown: () => focusNext(),
    onUp: () => focusPrevious(),
    onEnter: () => selectItem(),
    onEscape: () => closeMenu(),
    onHome: () => focusFirst(),
    onEnd: () => focusLast(),
  });

  return <ul role="menu" onKeyDown={onKeyDown}>{/* ... */}</ul>;
}

import { useTabsKeyboard } from "@compa11y/react";

function TabList() {
  const { onKeyDown } = useTabsKeyboard({
    onLeft: () => previousTab(),
    onRight: () => nextTab(),
    onHome: () => firstTab(),
    onEnd: () => lastTab(),
  });

  return <div role="tablist" onKeyDown={onKeyDown}>{/* ... */}</div>;
}

import { useGridKeyboard } from "@compa11y/react";

function DataGrid() {
  const { onKeyDown } = useGridKeyboard({
    onUp: () => moveUp(),
    onDown: () => moveDown(),
    onLeft: () => moveLeft(),
    onRight: () => moveRight(),
    onCtrlHome: () => goToFirstCell(),
    onCtrlEnd: () => goToLastCell(),
  });

  return <div role="grid" onKeyDown={onKeyDown}>{/* ... */}</div>;
}

import { useTypeAhead } from "@compa11y/react";

function FruitList({ items }) {
  const { onKeyDown, reset } = useTypeAhead(
    items.map((i) => i.label),
    (match) => {
      const index = items.findIndex((i) => i.label === match);
      setFocusedIndex(index);
    },
    { timeout: 500 }
  );

  return (
    <ul role="listbox" onKeyDown={onKeyDown} onBlur={reset}>
      {/* ... */}
    </ul>
  );
}

import { useKeyPressed } from "@compa11y/react";

function SelectableList() {
  const isShiftHeld = useKeyPressed("Shift");

  const handleSelect = (index) => {
    if (isShiftHeld) {
      extendSelection(index); // Shift+Click = range select
    } else {
      setSingleSelection(index);
    }
  };
}

import { useAnnouncer } from "@compa11y/react";

function SaveButton() {
  const { polite, assertive } = useAnnouncer();

  const handleSave = async () => {
    try {
      await save();
      polite("Changes saved successfully"); // Won't interrupt
    } catch {
      assertive("Error: failed to save"); // Interrupts current speech
    }
  };

  return <button onClick={handleSave}>Save</button>;
}

import { useAnnounceOnChange } from "@compa11y/react";

function SelectionCounter({ selectedCount }) {
  useAnnounceOnChange(
    selectedCount,
    (count) => `${count} item${count === 1 ? "" : "s"} selected`,
    { skipInitial: true }
  );

  return <span>{selectedCount} selected</span>;
}

import { useAnnounceLoading } from "@compa11y/react";

function DataTable({ isLoading, error }) {
  useAnnounceLoading(isLoading, {
    loadingMessage: "Loading data...",
    loadedMessage: "Data loaded successfully",
    errorMessage: "Failed to load data",
    error,
  });

  if (isLoading) return <p>Loading...</p>;
  return <table>{/* ... */}</table>;
}

import { useRovingTabindex } from "@compa11y/react";

function Toolbar() {
  const { activeIndex, getItemProps } = useRovingTabindex({
    itemCount: 3,
    orientation: "horizontal",
    wrap: true,
  });

  return (
    <div role="toolbar">
      <button {...getItemProps(0)}>Cut</button>
      <button {...getItemProps(1)}>Copy</button>
      <button {...getItemProps(2)}>Paste</button>
    </div>
  );
}

import { useRovingTabindexMap } from "@compa11y/react";

function Menu({ items }) {
  const ids = items.map((i) => i.id);
  const { activeId, getItemProps } = useRovingTabindexMap(ids, {
    orientation: "vertical",
  });

  return (
    <ul role="menu">
      {items.map((item) => (
        <li key={item.id} role="menuitem" {...getItemProps(item.id)}>
          {item.label}
        </li>
      ))}
    </ul>
  );
}