useFocusTrap

function useFocusTrap(options: {
  enabled: boolean;
  containerRef: { current: HTMLElement | null };
  /** Element to focus on open. Defaults to the first focusable child. */
  initialFocusRef?: { current: HTMLElement | null };
  /** Set false to trap Tab without moving focus on open. */
  autoFocus?: boolean;
  /** Return focus to the previously focused element on close. */
  restoreFocus?: boolean;
}): void;

import { useRef } from "react";
import { useFocusTrap } from "@solarius/onset";

function Dialog({ open }: { open: boolean }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const confirmRef = useRef<HTMLButtonElement>(null);

  useFocusTrap({
    enabled: open,
    containerRef,
    initialFocusRef: confirmRef,
    restoreFocus: true,
  });

  if (!open) return null;

  return (
    <div
      ref={containerRef}
      role="dialog"
      aria-modal="true"
      aria-label="Confirmation"
    >
      <button ref={confirmRef}>Confirm</button>
    </div>
  );
}