Modal & Dialog System

import { useEffect, useId, useRef } from "react";

interface ModalProps {
  open: boolean;
  title: string;
  onClose: () => void;
  children: React.ReactNode;
  /** ref to the element that triggered the dialog */
  triggerRef: React.RefObject<HTMLElement | null>;
}

export function Modal({ open, title, onClose, children, triggerRef }: ModalProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);
  const titleId = useId();

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;

    if (open) {
      dialog.showModal();

      // Mark sibling subtrees inert so screen-reader virtual cursor stays inside.
      const siblings = Array.from(document.body.children).filter(
        (el) => el !== dialog
      );
      siblings.forEach((el) => el.setAttribute("inert", ""));

      // Move focus to the first focusable element inside the dialog.
      const first = dialog.querySelector<HTMLElement>(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      first?.focus();
    } else {
      dialog.close();
    }

    return () => {
      // Always remove inert on cleanup.
      Array.from(document.body.children).forEach((el) =>
        el.removeAttribute("inert")
      );
    };
  }, [open]);

  // Return focus to trigger when dialog closes.
  function handleClose() {
    triggerRef.current?.focus();
    onClose();
  }

  return (
    <dialog
      ref={dialogRef}
      aria-labelledby={titleId}
      aria-modal="true"
      onClose={handleClose}
      // ::backdrop is styled via CSS — no JS needed.
      style={{ padding: 0 }}
    >
      <div role="document">
        <h2 id={titleId}>{title}</h2>
        {children}
        <button type="button" onClick={handleClose} aria-label="Close dialog">
          Close
        </button>
      </div>
    </dialog>
  );
}