feat: Focus the primary action in 'ConfirmationDialog'

[smockle]

Alternative to #1472. This PR makes focusTrap’s initialFocus handle action focus and retains the hack in Dialog.Buttons which handles action focus in nested focusTraps (such as the one in ShorthandHookFromActionMenu).

Fixes https://github.com/github/primer/issues/313

ℹ️ You might wonder–“Why wasn’t moving the autoFocus attribute from cancelButton to confirmButton in ConfirmationDialog.tsx sufficient?” Great question! I wondered the same thing at first. It turns out that this special case in focusTrap causes the primary-action button (confirmButton) to receive tabIndex: -1, so the secondary-action button (cancelButton) still receives focus, even if autoFocus: true is moved to confirmButton.

Screenshots

Screen recording demonstrating the primary action is focused when a 'ConfirmationDialog' opens:

We generally follow platform conventions, and primary-action-focus is the default in macOS confirmation dialogs (screen recording of Pages below):

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 96a667c

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

This PR includes changesets to release 1 package

Name	Type
@primer/components	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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	55.4 KB (+0.11% 🔺)
dist/browser.umd.js	55.72 KB (+0.15% 🔺)

[colebemis]

Looks good to me 👍 Thanks, @smockle!

Can you add a changeset?

[colebemis]

Is there a way we can write a test to check if the confirm button is focused when the dialog is opened? It be nice to catch any accidental regressions in CI.

[smockle]

From @colebemis in #1471 (comment):

Is there a way we can write a test to check if the confirm button is focused when the dialog is opened? It be nice to catch any accidental regressions in CI.

Yes there is! Added tests in 3abb636.

Check it out—the #1471 CI check passed, and the #1472 CI check failed—the new tests catch the problem with #1472!

[dgreif]

Changes look good. For reference, I'm fairly certain that @T-Hugs set it up this way intentionally. If I remember correctly (it's been a while), the mindset was to not have users accidentally trigger the submit button, but instead require them to move focus to it and then trigger it. Maybe he will weigh in since this is OSS 😁. In any case, I'm fine with making the change as it does match the behavior of most confirmation dialogs out there in the world.

[T-Hugs]

Indeed, the old behavior was intentional for the reason @dgreif stated. That said, I was never passionate about this particular choice one way or the other!