fix(SegmentedControl): set global focus styles

[francinelucca]

Closes https://github.com/github/primer/issues/3381

This is a revert of primer/react#5114. Corrects the detected bug by adding an offset to the GlobalFocusStyles.

Adds focus styles for SegmentedControlButton and SegmentedControlIconButton components via calling getGlobalFocusStyles() to ensure focus styles comply with accessibility color contrast. This function explicitly adds focus state using color: colors.accent.fg. This fixes contrast issues when using safari's default focus state.

Before:

After https://github.com/primer/react/pull/5029 (with bug):

Now:

Changelog

Changed

• Adds call to getGlobalFocusStyles() in SegmentedControlIconButtonStyled and SegmentedControlButtonStyled definitions.

Rollout strategy

• [x] 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

• Test SegmentedControl stories in preview deployment in safari, compare focus states to prod, ensure previous bug is no longer visible

Merge checklist

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

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: ec9afc89a47e420edb0145bdef0b337917c69f74

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

This PR includes changesets to release 1 package

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

[github-actions[bot]]

:wave: 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[bot]]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	96.9 KB (-0.1% 🔽)
packages/react/dist/browser.umd.js	97.25 KB (-0.03% 🔽)

[primer-integration[bot]]

🟢 golden-jobs completed with status success.

[github-actions[bot]]

Uh oh! @francinelucca, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[github-actions[bot]]

Uh oh! @francinelucca, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[primer-integration[bot]]

:wave: Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/347474

[francinelucca]

Should we add an e2e test for the focus state? Especially because we use a utility function for the focus styles which is great - just to be double sure that we don't introduce any visual regression if we ever make a change on the global utility focus styles. Let me know your thoughts 🙌🏻

Yesss , great idea ✨

[francinelucca]

Should we add an e2e test for the focus state?

@broccolinisoup done in 8756ea4, 5736299. LMK if I did that right 😅

[broccolinisoup]

Should we add an e2e test for the focus state?

@broccolinisoup done in 8756ea4, 5736299. LMK if I did that right 😅

Yeah perfect! 🔥

Side note: Not sure if we need the focus state for all stories but I don't think we have any space issues so far; so maybe we should just keep them all until we can't 😅

[francinelucca]

Side note: Not sure if we need the focus state for all stories but I don't think we have any space issues so far; so maybe we should just keep them all until we can't 😅

Was wondering that myself haha, what would be "standard" to just do it on the default for button/iconButton? maybe that makes more sense... happy to fix!

[broccolinisoup]

what would be "standard" to just do it on the default for button/iconButton?

Yeah that makes sense to me!