// The Modal component traps focus by intercepting Tab and Shift+Tab
// and wrapping around to the first/last focusable element
const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key !== "Tab") return;
  const focusable = modalRef.current.querySelectorAll<HTMLElement>(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  // ... wrap focus between first and last
};

const previousFocusRef = useRef<HTMLElement | null>(null);

useEffect(() => {
  if (isOpen) {
    previousFocusRef.current = document.activeElement as HTMLElement;
  } else {
    previousFocusRef.current?.focus();
  }
}, [isOpen]);

// Bad: Color is the only indicator
<span className="text-red-500">Error</span>

// Good: Icon + color + text
<span className="text-danger-600">
  <ErrorIcon /> Error: Field is required
</span>

/* In your global CSS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

className="motion-safe:animate-fade-in motion-reduce:animate-none"

   npm install -D @axe-core/react

   npm install -D eslint-plugin-jsx-a11y