Fix/modal autofocus close button

[AntonioABLima]

Summary

When the SaveChangesModal and FlowLogsModal open, the Close button was receiving auto-focus by default, which created a visually distracting experience - the highlighted Close button drew too much attention and felt cluttered.

In the FlowLogsModal, this behavior was especially noticeable when the table was empty or didn't have enough data to require scrolling.

To maintain accessibility without breaking it entirely (see radix-ui/primitives#935), the focus was redirected to the primary action button instead of removing focus completely.

Changes

• baseModal/index.tsx: Added onOpenAutoFocus prop support to pass to DialogContent
• flowLogsModal/index.tsx: Added onOpenAutoFocus handler to redirect focus to the close button
• saveChangesModal/index.tsx: Added onOpenAutoFocus handler to redirect focus to the "Save" button
• confirmationModal/index.tsx: Added support for onOpenAutoFocus prop
• types/components/index.ts: Added onOpenAutoFocus type definition

Evidence

FlowLogsModal

Before

Log.btn.focus.mov

After

Log.btn.no.focus.mov

SaveLogsModal

Before

Save.btn.focus.mov

After

Save.btn.no.focus.mov

Summary by CodeRabbit

Release Notes

• New Features
  • Added customizable auto-focus behavior for modals when they open, improving keyboard navigation and accessibility by directing focus to specific elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

Walkthrough

This change introduces a new optional callback prop onOpenAutoFocus across the modal component hierarchy. The prop enables custom focus management when modals open, allowing callers to programmatically focus specific elements instead of relying on default autofocus behavior.

Changes

Cohort / File(s)	Summary
Modal Type Definitions src/frontend/src/types/components/index.ts	Added optional onOpenAutoFocus property to ConfirmationModalType interface, typed as (e: Event) => void
Base Modal src/frontend/src/modals/baseModal/index.tsx	Added optional onOpenAutoFocus prop to BaseModalProps interface and destructured it in component parameters, forwarding to both DialogContentWithouFixed and DialogContent components
Modal Wrapper src/frontend/src/modals/confirmationModal/index.tsx	Added onOpenAutoFocus parameter to ConfirmationModal function signature and passed it through to underlying BaseModal
Modal Implementations src/frontend/src/modals/flowLogsModal/index.tsx, src/frontend/src/modals/saveChangesModal/index.tsx	Implemented onOpenAutoFocus callbacks in modal instances to prevent default focus and programmatically focus custom elements (ag-body-viewport and replace-button respectively)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 3 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	No test files found for the modal components (baseModal, confirmationModal, flowLogsModal, saveChangesModal).	Create test files for the modified modal components to ensure proper test coverage.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage	⚠️ Warning	Modified modal components (baseModal, confirmationModal, flowLogsModal, saveChangesModal) add onOpenAutoFocus prop but lack corresponding unit/integration tests for this new accessibility-related functionality.	Add test coverage for the new onOpenAutoFocus prop behavior in affected modal components to ensure accessibility features work as intended.
Test File Naming And Structure	⚠️ Warning	Pull request introduces functional changes to five files without corresponding test files, violating established testing patterns for modal components.	Create test files for each modified modal component following established patterns and verify focus/autofocus behavior changes with proper test coverage.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix/modal autofocus close button' directly reflects the main change: addressing modal autofocus behavior by redirecting focus away from the close button to primary action elements.
Excessive Mock Usage Warning	✅ Passed	This pull request does not include any modifications to test files. The PR adds support for an onOpenAutoFocus callback prop across five component files to improve modal focus management, but no corresponding unit tests or test modifications are present. Since the custom check is specifically designed to assess excessive mock usage within test files, and no test files are modified in this PR, the check is not applicable and passes by default.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Cristhianzl]

lgtm