Dialog (Modal)

function DialogPattern({ triggerLabel, title, children }) {
  const [open, setOpen] = useState(false);
  const dialogRef = useRef(null);
  const closeBtnRef = useRef(null);
  // Remember what had focus before opening so we can restore it on close.
  const triggerRef = useRef(null);

  useEffect(() => {
    if (!open) return;
    closeBtnRef.current?.focus(); // move focus INTO the dialog on open

    function onKeyDown(e) {
      if (e.key === "Escape") { setOpen(false); return; }
      if (e.key !== "Tab") return;

      // Manual focus trap: cycle Tab/Shift+Tab within the dialog so focus
      // can never reach the inert page behind it.
      const focusables = dialogRef.current.querySelectorAll(
        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
      );
      const first = focusables[0], last = focusables[focusables.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [open]);

  function close() {
    setOpen(false);
    triggerRef.current?.focus(); // restore focus to the trigger
  }

  return (
    <>
      <button ref={triggerRef} onClick={() => setOpen(true)}>
        {triggerLabel}
      </button>
      {open && (
        <div className="overlay" onMouseDown={(e) => {
          if (e.target === e.currentTarget) close();
        }}>
          <div
            ref={dialogRef}
            role="dialog"
            aria-modal="true"
            aria-labelledby="dialog-title"
          >
            <h2 id="dialog-title">{title}</h2>
            <button ref={closeBtnRef} onClick={close} aria-label="Close">×</button>
            {children}
          </div>
        </div>
      )}
    </>
  );
}