useFocusTrap

useFocusTrap() keeps keyboard focus within a container element while active. This is essential for accessibility - when a modal dialog is open, Tab and Shift+Tab should cycle through focusable elements inside the dialog, not escape to the page behind it.

import { useFocusTrap } from '@c15t/nextjs';
import { useRef } from 'react';

function AccessibleModal({ isOpen }: { isOpen: boolean }) {
  const containerRef = useRef<HTMLDivElement>(null);
  useFocusTrap(isOpen, containerRef);

  if (!isOpen) return null;

  return (
    <div ref={containerRef} role="dialog" aria-modal="true">
      <h2>Modal Title</h2>
      <button>Action</button>
      <button>Close</button>
    </div>
  );
}

Parameters

Behavior

• Tab: Moves focus to the next focusable element. Wraps to the first element when reaching the end.
• Shift+Tab: Moves focus to the previous focusable element. Wraps to the last element when reaching the start.
• Focus is restored to the previously focused element when the trap is deactivated.