Breadcrumbs: Fix esc button not being able to focus on the menubuttonRef

[pksjce]

Closes ##6752

Changelog

The details component seems to swallow the ref value here for some reason. The button ref really doesn't get set here. There seems no issue with the IconButton ref as I initially assumed. I had to workaround to find the right summary element for this feature to work well.

Before

Screen.Recording.2025-09-15.at.11.23.12.pm.mov

After

Screen.Recording.2025-09-15.at.11.41.26.pm.mov

New

Changed

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: c112cf2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Patch
@primer/styled-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull Request Overview

This PR fixes an issue where the escape button couldn't properly focus on the menu button in the Breadcrumbs component. The problem was that the Details component was preventing the ref from being properly set on the button element.

• Updated ref type from HTMLElement to HTMLButtonElement for better type safety
• Implemented a workaround to find the correct summary element using DOM querying instead of direct ref assignment
• Removed the ref prop from the IconButton since the ref is now set via DOM querying

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.48 KB (-0.16% 🔽)
packages/react/dist/browser.umd.js	89.71 KB (+0.17% 🔺)

[francinelucca]

the reason the ref is getting dumped is because the IconButton does not include the forwardedRef if the button has an external tooltip. Can we work around this instead of hacking a querySelector? options:

• put the ref on the tooltip in Breadcrumbs.tsx, like the IconButton does
• use the IconButton api to render the tooltip, instead of rendering it in Breadcrumbs.tsx

[pksjce]

Hi, So this is the route I first went through to fix this issue.

1. IconButton does include the forwardedRef. With standalone IconButton I had zero issues with ref. Even with the as="summary".
2. The issue here is how Details component works. The component renders a different summary component before it recognises the one that I've passed in.

Maybe we could pair on this tomorrow and find a different solution?