javascript 69 lines · 9 steps

Building an accessible modal in React

A React modal that traps focus, handles Escape, and restores focus on close using portals and refs.

Explained by highlit

React Advanced focus-trap accessibility portals refs keyboard-navigation

1import { useCallback, useEffect, useRef } from 'react';
2import { createPortal } from 'react-dom';
3 
4const FOCUSABLE = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
5 
6export default function Modal({ isOpen, onClose, title, children }) {
const dialogRef = useRef(null);
const previouslyFocused = useRef(null);
9 
const handleKeyDown = useCallback((event) => {
  if (event.key === 'Escape') {
    onClose();
    return;
  }
  if (event.key !== 'Tab') return;
16 
  const nodes = dialogRef.current.querySelectorAll(FOCUSABLE);
  if (nodes.length === 0) return;
19 
  const first = nodes[0];
  const last = nodes[nodes.length - 1];
22 
  if (event.shiftKey && document.activeElement === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
}, [onClose]);
31 
useEffect(() => {
  if (!isOpen) return;
34 
  previouslyFocused.current = document.activeElement;
  const first = dialogRef.current.querySelector(FOCUSABLE);
  (first ?? dialogRef.current).focus();
38 
  document.body.style.overflow = 'hidden';
  return () => {
    document.body.style.overflow = '';
    previouslyFocused.current?.focus();
  };
}, [isOpen]);
45 
if (!isOpen) return null;
47 
return createPortal(
  <div className="modal-overlay" onMouseDown={onClose}>
    <div
      ref={dialogRef}
      className="modal-dialog"
      role="dialog"
      aria-modal="true"
      aria-label={title}
      tabIndex={-1}
      onKeyDown={handleKeyDown}
      onMouseDown={(e) => e.stopPropagation()}
    >
      <header className="modal-header">
        <h2>{title}</h2>
        <button type="button" aria-label="Close" onClick={onClose}>×</button>
      </header>
      <div className="modal-body">{children}</div>
    </div>
  </div>,
  document.body,
);
69}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A focus trap works by cycling Tab from the last focusable element back to the first, and vice versa with Shift+Tab.
2Saving the previously focused element lets you restore focus when the modal closes, keeping keyboard users oriented.
3Rendering into document.body via a portal escapes parent stacking contexts while staying inside React's tree.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);