Allow changing initially focused button in ConfirmationDialog

[camchenry]

• Related to https://github.com/github/memex/issues/20813

Adds the ability to change the button that is initially focused when using ConfirmationDialog or useConfirm. The majority of the time the current default behavior is desirable: focus the confirm button unless the action is dangerous. However, there are some cases where we want to automatically focus the dangerous action button to remove friction from actions that are done repeatedly. Otherwise, the user needs to press RightArrow or Tab before every action which is tedious. This behavior should rarely be overridden, but the API should support changing this to make some actions easier for keyboard users.

CleanShot.2025-09-12.at.11.55.29.mp4

Changelog

New

• Adds a overrideButtonFocus prop to ConfirmationDialog/useConfirm to change the button that is initially focused, overriding the default focus behavior

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

Nothing in particular: I've added an automated test for this behavior, and I've also manually validated the behavior in Storybook.

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: e002671

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	Minor
@primer/styled-react	Major

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

[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.47 KB (-0.17% 🔽)
packages/react/dist/browser.umd.js	89.58 KB (+0.02% 🔺)

[Copilot]

Pull Request Overview

This PR adds support for customizing the initially focused button in ConfirmationDialog and useConfirm. By default, the confirm button is focused unless it's a dangerous action (in which case the cancel button is focused). The new feature allows overriding this behavior to improve keyboard user experience for repetitive actions.

• Adds initialButtonFocus/initialFocusButton prop to override default focus behavior
• Updates focus logic to use the new prop when provided
• Adds comprehensive test coverage for the new functionality

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx	Adds initialFocusButton prop and updates focus logic to use it
packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx	Adds test for overriding dangerous button focus behavior
packages/react/src/ConfirmationDialog/ConfirmationDialog.docs.json	Documents the new initialButtonFocus prop
packages/react/src/ConfirmationDialog/useConfirm.hookDocs.json	Documents the new initialButtonFocus option for the hook
.changeset/wet-terms-argue.md	Adds changeset entry for the minor release

[TylerJDev]

LGTM!