Alert & Alert Dialog

function AlertDialogPattern({ title, confirmLabel, cancelLabel }) {
  const [open, setOpen] = useState(false);
  const dialogRef = useRef(null);
  const cancelBtnRef = useRef(null); // least destructive action
  const triggerRef = useRef(null);

  useEffect(() => {
    if (!open) return;
    cancelBtnRef.current?.focus(); // NEVER focus the destructive button

    function onKeyDown(e) {
      if (e.key === "Escape") { close(); return; }
      if (e.key !== "Tab") return;
      // ...manual focus trap, same as Dialog...
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [open]);

  function close() {
    setOpen(false);
    triggerRef.current?.focus();
  }

  return (
    <>
      <button ref={triggerRef} onClick={() => setOpen(true)}>Delete 12 items</button>
      {open && (
        <div className="overlay"> {/* no click-outside-to-close */}
          <div ref={dialogRef} role="alertdialog" aria-modal="true" aria-labelledby="title">
            <h2 id="title">{title}</h2>
            <button ref={cancelBtnRef} onClick={close}>{cancelLabel}</button>
            <button onClick={close}>{confirmLabel}</button>
          </div>
        </div>
      )}
    </>
  );
}