Skip to content

fix(button): forward __next__ Button ref to DOM element#8024

Draft
tamas-sage wants to merge 7 commits into
masterfrom
FE-7668-fix-next-button-focus-trap
Draft

fix(button): forward __next__ Button ref to DOM element#8024
tamas-sage wants to merge 7 commits into
masterfrom
FE-7668-fix-next-button-focus-trap

Conversation

@tamas-sage

@tamas-sage tamas-sage commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Proposed behaviour

Button/next now forwards its ref to the underlying DOM element (button / a) instead of exposing an imperative handle.
This aligns with Dialog/FocusTrap expectations for focusFirstElement and prevents the runtime error when opening the dialog.

image

Current behaviour

Button/next exposed an imperative handle (focusButton) via ref.
When this was passed to focusFirstElement, FocusTrap expected an HTMLElement-compatible value and opening the dialog could throw a “failed to execute” error.

image

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

@edleeks87 edleeks87 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tamas-sage, apologies the ticket hasn't captured the change to the requirements here. I think a better approach is to make a breaking change on the next button and change the ref to point to the underlying DOM element instead of the handle it has currently. Happy to chat on slack if you want to ping me and we can update the ticket if needed

@tamas-sage tamas-sage changed the title fix(dialog): next button focus trap fix(button): forward __next__ Button ref to DOM element Jun 18, 2026
@tamas-sage tamas-sage requested a review from edleeks87 June 18, 2026 16:23
@tamas-sage

Copy link
Copy Markdown
Contributor Author

@tamas-sage, apologies the ticket hasn't captured the change to the requirements here. I think a better approach is to make a breaking change on the next button and change the ref to point to the underlying DOM element instead of the handle it has currently. Happy to chat on slack if you want to ping me and we can update the ticket if needed

Thanks, that makes sense, I’ve updated this PR to use a breaking change on next Button so the ref now points to the underlying DOM element (instead of an imperative handle). I’ve also updated the PR description/title to reflect that.

@edleeks87 edleeks87 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one @tamas-sage, when we merge we should squash/rebase so just this commit and its message is left. We'll also need to add the BREAKING CHANGE comment to the commit so we trigger a major release etc

Comment thread src/components/button/__next__/button.component.tsx Outdated
Comment thread src/components/button/__next__/button.component.tsx Outdated
@tamas-sage tamas-sage force-pushed the FE-7668-fix-next-button-focus-trap branch from ae2462b to b3c0291 Compare June 19, 2026 11:57
@tamas-sage tamas-sage requested a review from edleeks87 June 19, 2026 11:58
edleeks87
edleeks87 previously approved these changes Jun 19, 2026
BREAKING CHANGE: __next__ Button no longer exposes ButtonHandle.focusButton().
@tamas-sage tamas-sage force-pushed the FE-7668-fix-next-button-focus-trap branch from b3c0291 to 6d75c23 Compare June 19, 2026 12:55
@tamas-sage tamas-sage requested a review from edleeks87 June 23, 2026 15:29
edleeks87
edleeks87 previously approved these changes Jun 24, 2026
@tamas-sage tamas-sage dismissed stale reviews from mihai-albu-sage and edleeks87 via b01489e June 30, 2026 08:44
@tamas-sage tamas-sage force-pushed the FE-7668-fix-next-button-focus-trap branch from b01489e to d3157c3 Compare June 30, 2026 09:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants