Accessibility (a11y): WCAG 2.1 AA, Focus Management & ARIA

import { useEffect, useRef } from 'react';

export function AccessibleModal({
  isOpen,
  onClose,
  title,
  children,
}: {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}) {
  const modalRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      // 1. Save reference to element that triggered the modal
      triggerRef.current = document.activeElement as HTMLElement;

      // 2. Focus the modal container or first focusable element
      modalRef.current?.focus();

      // 3. Handle Escape key and Tab trapping
      const handleKeyDown = (e: KeyboardEvent) => {
        if (e.key === 'Escape') onClose();

        if (e.key === 'Tab' && modalRef.current) {
          const focusable = modalRef.current.querySelectorAll<HTMLElement>(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const first = focusable[0];
          const last = focusable[focusable.length - 1];

          if (e.shiftKey && document.activeElement === first) {
            last.focus();
            e.preventDefault();
          } else if (!e.shiftKey && document.activeElement === last) {
            first.focus();
            e.preventDefault();
          }
        }
      };

      window.addEventListener('keydown', handleKeyDown);
      return () => {
        window.removeEventListener('keydown', handleKeyDown);
        // 4. Return focus to the trigger button upon close!
        triggerRef.current?.focus();
      };
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
      tabIndex={-1}
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
    >
      <div className="rounded-xl border border-ink-border bg-ink-panel p-6 shadow-2xl">
        <h2 id="modal-title" className="text-lg font-bold text-text">{title}</h2>
        <div className="mt-3 text-sm text-text-muted">{children}</div>
        <button
          onClick={onClose}
          className="mt-4 rounded bg-signal-cyan px-4 py-2 text-sm font-semibold text-ink"
        >
          Close
        </button>
      </div>
    </div>
  );
}