Modal Settings Panel

Build a modal settings panel component that properly manages keyboard focus during interaction.

Requirements

The component should:

1. Display a button that opens a settings modal when clicked
2. Render a modal overlay that contains:
   • A heading labeled "Settings"
   • An input field for "Username" with a text input
   • An input field for "Email" with a text input
   • A "Save" button that closes the modal
   • A "Cancel" button that closes the modal
3. Trap keyboard focus within the modal while it's open - users should not be able to tab outside the modal
4. Automatically focus the first input field (Username) when the modal opens
5. Restore focus to the trigger button when the modal closes
6. Close the modal when the user presses the Escape key
7. Prevent interaction with content behind the modal while it's open

Implementation

@generates

API

export function SettingsModal(): JSX.Element;

Test Cases

• Clicking the trigger button opens the modal and focuses the Username input @test
• Pressing Tab cycles focus only within the modal when open @test
• Pressing Escape closes the modal and returns focus to the trigger button @test
• Clicking the Save button closes the modal and returns focus to the trigger button @test

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible UI components with focus management capabilities.

@satisfied-by