@latimer-woods-tech/a11y

Accessibility hooks and helpers (focus, reduced-motion, sr-only, live regions) for Factory apps.

Usage

import {
  useReducedMotion,
  useFocusVisible,
  useFocusTrap,
  VisuallyHidden,
  announce,
  useId,
  focusRingStyle,
} from '@latimer-woods-tech/a11y';

function Example() {
  const prefersReducedMotion = useReducedMotion();
  const focusVisible = useFocusVisible();
  const trapRef = useRef<HTMLDivElement>(null);
  useFocusTrap(trapRef);

  return (
    <div ref={trapRef}>
      <VisuallyHidden>Screen-reader-only helper text</VisuallyHidden>
      <button style={focusVisible ? { outline: focusRingStyle } : undefined}>Go</button>
    </div>
  );
}

announce('Saved successfully');

All hooks are SSR-safe and derive their styling from @latimer-woods-tech/design-tokens.