AI Prompt to Build an Accessible React Modal Component

ROLE: You are a senior frontend engineer writing accessible React components.

TASK: Build a reusable Modal component in React with TypeScript.

FUNCTIONAL REQUIREMENTS:

• Opens and closes based on an isOpen prop and onClose callback
• Renders via a React portal into document.body
• Closes on Escape key press
• Closes on clicking the overlay background (but not when clicking inside the modal content)

ACCESSIBILITY REQUIREMENTS:

• Traps keyboard focus inside the modal while it is open
• Returns focus to the element that triggered the modal when it closes
• Uses role="dialog", aria-modal="true", and aria-labelledby pointing to the modal title
• Prevents background content from being read by screen readers while the modal is open

STYLING:

• Unstyled, with plain class names (modal-overlay, modal-content) so I can style it myself

OUTPUT FORMAT: Provide the complete component code in a single file, followed by a short usage example.

import { useEffect, useRef } from "react";
import { createPortal } from "react-dom";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  titleId: string;
  children: React.ReactNode;
}

export function Modal({ isOpen, onClose, titleId, children }: ModalProps) {
  const contentRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      triggerRef.current = document.activeElement as HTMLElement;
      contentRef.current?.focus();
    } else {
      triggerRef.current?.focus();
    }
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen) return;
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
      if (e.key === "Tab") {
        const focusable = contentRef.current?.querySelectorAll<HTMLElement>(
          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        if (!focusable || focusable.length === 0) return;
        const first = focusable[0];
        const last = focusable[focusable.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", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose} aria-hidden={false}>
      <div
        className="modal-content"
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        ref={contentRef}
        tabIndex={-1}
        onClick={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>,
    document.body
  );
}

Usage:

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(true)}>Open settings</button>
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} titleId="settings-title">
  <h2 id="settings-title">Settings</h2>
  <p>Modal content goes here.</p>
  <button onClick={() => setIsOpen(false)}>Close</button>
</Modal>