feat(modal): add initialFocus prop for custom focus management

[Copilot]

• Analyze current Modal component implementation and focus behavior
• Review existing tests and understand current focus management
• Set up development environment and run existing tests
• Add initialFocus prop to ModalProps interface in types.ts
• Update Modal component to pass initialFocus prop to Headless UI Dialog
• Add comprehensive tests for initialFocus functionality
• Update Storybook stories to demonstrate initialFocus usage
• Validate implementation with manual testing
• Address review feedback:
  • Move story description to parameters
  • Update story to use input field with form
  • Use only Submit/Cancel buttons
  • Remove redundant test case
  • Add test for undefined initialFocus behavior

Implementation Summary

Successfully added the initialFocus prop to the Modal component and addressed all review feedback. The implementation now includes:

Changes Made

1. Added initialFocus prop to ModalProps: Added initialFocus?: MutableRefObject<HTMLElement | null> to the interface
2. Updated Modal component: Pass the initialFocus prop to Headless UI's Dialog component
3. Updated Storybook story:
   • Moved description to story parameters
   • Changed to show form with input field and initial focus on input
   • Simplified to use only Submit and Cancel buttons
4. Updated tests:
   • Removed redundant test case about close button presence
   • Added test for when initialFocus is undefined to ensure close button gets focus

Validation

• ✅ All 9 tests pass (including new initialFocus tests)
• ✅ TypeScript types are correct
• ✅ Code passes linting and formatting checks
• ✅ Build succeeds without errors
• ✅ Storybook story demonstrates proper form usage

The implementation now properly demonstrates the initialFocus prop in a realistic form scenario while maintaining full backwards compatibility.

Fixes #15.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[huyenltnguyen]

@copilot Address the feedback.

[huyenltnguyen]

The description should be added to the story description instead.

InitialFocusTemplate.parameters = {
  docs: {
		description: {
			story:
				"...",
		},
	},
}

You should:

• Change the modal body to contain some text and an input field.
• Place the initial focus on the input field.
• Use only two buttons on the modal: "Submit" and "Cancel".

[Copilot]

Updated the story as requested. The description is now in story parameters, the modal contains a form with an input field that receives initial focus, and uses only Submit and Cancel buttons. Commit: c2cf9d2

[huyenltnguyen]

The close button is always present, so we don't need this test case.

Instead, make sure there's a test for the scenario where initialFocus is undefined. In that case, the close button should receive the initial focus.

[Copilot]

Removed the redundant test case and added a test for when initialFocus is undefined to ensure the close button receives focus by default. Commit: c2cf9d2

[Copilot]

@copilot Address the feedback.

All feedback has been addressed. The story now demonstrates a realistic form scenario with input field focus, and the tests properly cover both defined and undefined initialFocus scenarios. Commit: c2cf9d2

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: node /home/REDACTED/work/ui/ui/node_modules/.bin/../storybook/bin/index.cjs dev -p 6006 --no-open (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)