Modal Dialog with Custom Hooks

Build a modal dialog component that uses Headless UI's custom hooks for focus management, accessibility, and programmatic control.

Requirements

Create a ModalManager component that displays a modal dialog with:

1. Focus Trapping: Use FocusTrap to contain focus within the modal when open, with automatic focus restoration when closed
2. Programmatic Closing: Create an ActionButton component that uses the useClose hook to close the modal without prop drilling
3. Accessible Labels: Use Label and Description components with their corresponding hooks (useLabelledBy and useDescribedBy) to properly associate the modal title and description

Component Structure

The modal should include:

• A trigger button that opens the modal
• A backdrop overlay
• A dialog panel containing:
  • A title using the Label component
  • A description using the Description component
  • An input field for user name
  • Two ActionButton components (Cancel and Submit)

Expected Behavior

• Clicking the trigger button opens the modal
• When opened, focus moves to the first focusable element (the input field)
• Pressing Tab cycles focus only within the modal (cannot tab outside)
• The modal's dialog element should have aria-labelledby pointing to the title
• The modal's dialog element should have aria-describedby pointing to the description
• Clicking Cancel closes the modal
• Clicking Submit logs the input value to the console and then closes the modal
• When closed, focus returns to the trigger button

Test Cases

• Opening the modal moves focus to the input field @test
• Tab key cycles focus only within the modal boundaries @test
• The dialog element has aria-labelledby attribute matching the title's ID @test
• The dialog element has aria-describedby attribute matching the description's ID @test
• Clicking the Cancel button closes the modal and restores focus to the trigger @test
• Clicking the Submit button logs the input value and closes the modal @test

Implementation

@generates

API

/**
 * A modal dialog manager with advanced focus management and accessibility
 */
export function ModalManager(): JSX.Element;

/**
 * Action button component that can close the modal using hooks
 */
function ActionButton(props: ActionButtonProps): JSX.Element;

interface ActionButtonProps {
  /** Button label text */
  children: React.ReactNode;
  /** Click handler for additional logic before closing */
  onClick?: () => void;
  /** Visual variant for the button */
  variant?: 'primary' | 'secondary';
}

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible UI components and custom hooks for React applications, including focus management, label/description associations, and component context utilities.