fix(a11y): fix portal content effects firing before portal mount

[jmuzina]

Done

Updates the usePortal hook to run its content mounting logic in useLayoutEffect instead of useEffect.

Otherwise, components that render content in a portal and use effects that assume that content has been rendered will run those effects before the portal has mounted. For example: <Modal> content being mounted after a hook in <Modal> has tried to auto-focus the modal close button, and thus failing to move focus to the modal.

This fixes focus not being applied to interactive children of portal elements upon opening. Currently this is:

• ConfirmationModal
• ConfirmationButton

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

1. Open the portaled confirmation modal story.
2. Use a keyboard to open the confirmation modal.
3. Verify focus goes to the modal immediately upon opening (currently, it does not).

Percy steps

• No visual changes expected

Fixes

Fixes: #1366

[Copilot]

🟡 Changes recommended

Resolve the hooks lint failure and add regression coverage for portal child focus timing.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Updates usePortal to mount portals before child focus effects run and adds a portaled confirmation modal Storybook example.

Changes:

• Uses an isomorphic layout effect for portal mounting.
• Adds a portaled ConfirmationModal story.

File summaries

File	Summary	Findings
src/external/usePortal.ts	Adjusts portal mounting timing.	Critical: useSSR is invoked at module scope, violating hooks lint rules. Nit: Add regression coverage for descendant focus timing.
src/components/ConfirmationModal/ConfirmationModal.stories.tsx	Adds a portaled modal example.	No findings.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[jademathre-canonical]

LGTM!

[edlerd]

thanks for the fix!