Keyboard Only Access

// Custom Modal Dialog with Focus Trap in React
import React, { useEffect, useRef } from "react";
import { X } from "lucide-react";

export function AccessibleDialog({ isOpen, onClose, title, children }) {
  const dialogRef = useRef(null);

  useEffect(() => {
    if (!isOpen) return;

    // Focus first focusable item on open
    const focusable = dialogRef.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex="0"]'
    );
    const first = focusable?.[0];
    first?.focus();

    // Trap focus inside modal boundaries
    const handleKeyDown = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key !== "Tab") return;

      const active = document.activeElement;
      const last = focusable?.[focusable.length - 1];

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

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
      <div 
        ref={dialogRef}
        role="dialog" 
        aria-modal="true" 
        aria-labelledby="dialog-title"
        className="w-full max-w-md rounded-md bg-card p-6 shadow-xl border border-border"
      >
        <div className="flex items-center justify-between border-b border-border pb-3 mb-4">
          <h3 id="dialog-title" className="text-lg font-semibold">{title}</h3>
          <button onClick={onClose} aria-label="Close dialog" className="rounded-full p-1 hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary">
            <X className="size-4" />
          </button>
        </div>
        <div>{children}</div>
      </div>
    </div>
  );
}