Accessible Alert Dialog

import React, { useEffect, useRef } from "react";
import "./AccessibleAlertDialog.css";

/**
 * AccessibleAlertDialog
 *   - open, onClose: controlled state
 *   - title, description: strings or elements (both required for a11y)
 *   - confirmLabel (default "Confirm")
 *   - cancelLabel  (default "Cancel")
 *   - onConfirm:   callback for the destructive action
 *   - danger:      true to style confirm as destructive
 *   - initialFocus: "cancel" (default, safe) or "confirm"
 */
export default function AccessibleAlertDialog({
  open, onClose, title, description,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  onConfirm,
  danger = false,
  initialFocus = "cancel",
}) {
  const panelRef = useRef(null);
  const cancelRef = useRef(null);
  const confirmRef = useRef(null);
  const prevActive = useRef(null);

  useEffect(() => {
    if (!open) return;
    prevActive.current = document.activeElement;
    (initialFocus === "confirm" ? confirmRef : cancelRef).current?.focus();
  }, [open, initialFocus]);

  useEffect(() => {
    if (open) return;
    prevActive.current?.focus?.();
  }, [open]);

  useEffect(() => {
    if (!open) return;
    function onKey(e) {
      if (e.key === "Escape") { e.preventDefault(); onClose(); return; }
      if (e.key !== "Tab") return;
      const nodes = panelRef.current?.querySelectorAll("button:not([disabled])");
      if (!nodes || nodes.length === 0) return;
      const first = nodes[0], last = nodes[nodes.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", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="alert">
      <div
        ref={panelRef}
        role="alertdialog"
        aria-labelledby="alert-title"
        aria-describedby="alert-desc"
        className="alert__panel"
      >
        <h2 id="alert-title">{title}</h2>
        <p id="alert-desc">{description}</p>
        <div className="alert__actions">
          <button
            ref={cancelRef}
            type="button"
            className="btn btn--ghost"
            onClick={onClose}
          >
            {cancelLabel}
          </button>
          <button
            ref={confirmRef}
            type="button"
            className={danger ? "btn btn--danger" : "btn"}
            onClick={() => { onConfirm?.(); onClose(); }}
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

import { useState } from "react";
import AccessibleAlertDialog from "./AccessibleAlertDialog";

export default function AccountSettings() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Delete account
      </button>

      <AccessibleAlertDialog
        open={open}
        onClose={() => setOpen(false)}
        title="Delete account?"
        description="This permanently deletes your account and all projects."
        confirmLabel="Yes, delete"
        danger
        initialFocus="cancel"
        onConfirm={handleDelete}
      />
    </>
  );
}