Jonathan
3284059aba
Pressing Plant styled modal — ESC + backdrop close, Tab focus trap, body scroll lock, focus restore, reduced-motion. Foundation for album/artist modals. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, type ReactNode } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
const FOCUSABLE = 'a[href],button:not([disabled]),input,select,textarea,[tabindex]:not([tabindex="-1"])';
|
|
|
|
/** Accessible modal: portal to <body>, ESC + backdrop close, focus trap, scroll lock,
|
|
* focus restore on close. Renders nothing when closed. */
|
|
export function Modal({
|
|
open,
|
|
onClose,
|
|
title,
|
|
children,
|
|
wide,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title?: ReactNode;
|
|
children: ReactNode;
|
|
wide?: boolean;
|
|
}) {
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
const lastFocus = useRef<HTMLElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
lastFocus.current = document.activeElement as HTMLElement | null;
|
|
const prevOverflow = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
panelRef.current?.focus();
|
|
|
|
function onKey(e: KeyboardEvent) {
|
|
if (e.key === "Escape") {
|
|
onClose();
|
|
return;
|
|
}
|
|
if (e.key !== "Tab") return;
|
|
const nodes = panelRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE);
|
|
if (!nodes || nodes.length === 0) return;
|
|
const first = nodes[0];
|
|
const 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);
|
|
document.body.style.overflow = prevOverflow;
|
|
lastFocus.current?.focus();
|
|
};
|
|
}, [open, onClose]);
|
|
|
|
if (!open || typeof document === "undefined") return null;
|
|
|
|
return createPortal(
|
|
<div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
|
<div className={`modal-panel${wide ? " wide" : ""}`} role="dialog" aria-modal="true" ref={panelRef} tabIndex={-1}>
|
|
<div className="modal-head">
|
|
<div className="modal-title">{title}</div>
|
|
<button className="modal-close" aria-label="Close" onClick={onClose}>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">{children}</div>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|