Frontend Blocks typescript Intermediate

Accessible Focus-Trap Modal

Keyboard-navigable modal with focus trap and ARIA attributes. Closes on Escape.

typescript

import { useEffect, useRef } from 'react';
export function Modal({ open, onClose, children }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!open) return;
    ref.current && ref.current.focus();
    document.body.style.overflow = 'hidden';
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', h); };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/70' onClick={onClose}>
      <div ref={ref} tabIndex={-1} role='dialog' aria-modal='true'
           className='bg-slate-900 border border-slate-700 rounded-2xl p-6 w-full max-w-md'
           onClick={(e) => e.stopPropagation()}>{children}</div>
    </div>
  );
}