fix(modal): skip hidden elements when setting focus

[anusha-c18]

Done

• Modal focus management now ignores hidden elements. The focus trap and initial focus only consider elements that are actually visible, so a hidden close button (or any hidden focusable element) no longer traps focus or breaks keyboard navigation.
• Added tests covering the focus trap and initial focus behaviour when elements are hidden.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Verify the modal tests and confirm they pass.

Percy steps

• List any expected visual change in Percy, or write something like "No visual changes expected" if none is expected.

Fixes

Fixes: #AC-4874

[Copilot]

Pull request overview

Improves Modal focus management so hidden focusable elements don’t interfere with initial focus and the focus trap, addressing keyboard navigation issues when elements (e.g., the close button) are visually hidden.

Changes:

• Filter focusable elements to only those considered visible when trapping focus on Tab/Shift+Tab.
• Update initial-focus behavior to avoid focusing a hidden close button, falling back to the first visible focusable element.
• Add tests covering focus trapping and initial focus when elements are hidden.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/components/Modal/Modal.tsx	Adds visibility filtering for focusable elements and updates initial focus fallback logic.
src/components/Modal/Modal.test.tsx	Adds tests for hidden elements in the focus trap and initial focus behavior when the close button is hidden.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[fasih-mehmood]

LGTM, thank you!

[github-actions]

🎉 This PR is included in version 4.8.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀