fix(SegmentedControl): set global focus styles (#5140)

* Revert "revert: set global focus styles (#5114)"

This reverts commit 9f37707.

* fix(SegmentedControl): add offset to globalFocusStyle

* test(SegmentedControl): add e2e focus tests

* test(vrt): update snapshots

* test(SegmentedControl): only test focus state on button and icon stories

* Revert "test(vrt): update snapshots"

This reverts commit 5736299.

* test(vrt): update snapshots

---------

Co-authored-by: francinelucca <francinelucca@users.noreply.github.com>

.changeset/itchy-paws-bake.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SegmentedControl): set global focus styles

e2e/components/SegmentedControl.test.ts

@@ -17,6 +17,16 @@ test.describe('SegmentedControl', () => {
 
           // Default state
           expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Default.${theme}.png`)
+
+          // Focus state
+          await page.keyboard.press('Tab')
+          expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Default.${theme}.focus.png`)
+
+          // Middle Button Focus state
+          await page.keyboard.press('Tab')
+          await page.keyboard.press('Enter')
+          await page.keyboard.press('Shift+Tab')
+          expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Default.${theme}.middle.selected.focus.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -407,6 +417,18 @@ test.describe('SegmentedControl', () => {
 
           // Default state
           expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Icon Only.${theme}.png`)
+
+          // Focus state
+          await page.keyboard.press('Tab')
+          expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.Icon Only.${theme}.focus.png`)
+
+          // Middle Button Focus state
+          await page.keyboard.press('Tab')
+          await page.keyboard.press('Enter')
+          await page.keyboard.press('Shift+Tab')
+          expect(await page.screenshot()).toMatchSnapshot(
+            `SegmentedControl.Icon Only.${theme}.middle.selected.focus.png`,
+          )
         })
 
         test('axe @aat', async ({page}) => {
@@ -445,6 +467,18 @@ test.describe('SegmentedControl', () => {
 
           // Default state
           expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.With Icons.${theme}.png`)
+
+          // Focus state
+          await page.keyboard.press('Tab')
+          expect(await page.screenshot()).toMatchSnapshot(`SegmentedControl.With Icons.${theme}.focus.png`)
+
+          // Middle Button Focus state
+          await page.keyboard.press('Tab')
+          await page.keyboard.press('Enter')
+          await page.keyboard.press('Shift+Tab')
+          expect(await page.screenshot()).toMatchSnapshot(
+            `SegmentedControl.With Icons.${theme}.middle.selected.focus.png`,
+          )
         })
 
         test('axe @aat', async ({page}) => {

packages/react/src/SegmentedControl/SegmentedControlButton.tsx

@@ -8,6 +8,7 @@ import sx, {merge} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {isElement} from 'react-is'
+import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -22,6 +23,7 @@ export type SegmentedControlButtonProps = {
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlButtonStyled = styled.button`
+  ${getGlobalFocusStyles('-1px')};
   ${sx};
 `
 

packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx

@@ -8,6 +8,7 @@ import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from
 import Box from '../Box'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {isElement} from 'react-is'
+import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
@@ -21,6 +22,7 @@ export type SegmentedControlIconButtonProps = {
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 const SegmentedControlIconButtonStyled = styled.button`
+  ${getGlobalFocusStyles('-1px')};
   ${sx};
 `