diff --git a/.changeset/itchy-paws-bake.md b/.changeset/itchy-paws-bake.md new file mode 100644 index 00000000000..532507c7a46 --- /dev/null +++ b/.changeset/itchy-paws-bake.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(SegmentedControl): set global focus styles diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-focus-linux.png new file mode 100644 index 00000000000..4d7c67b44d6 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-middle-selected-focus-linux.png new file mode 100644 index 00000000000..ddc1c775383 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-focus-linux.png new file mode 100644 index 00000000000..e032db1d2ce Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-middle-selected-focus-linux.png new file mode 100644 index 00000000000..28f2d77afdb Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-focus-linux.png new file mode 100644 index 00000000000..4d7c67b44d6 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-focus-linux.png new file mode 100644 index 00000000000..e09c1789516 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-middle-selected-focus-linux.png new file mode 100644 index 00000000000..643b04aec51 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-middle-selected-focus-linux.png new file mode 100644 index 00000000000..ddc1c775383 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-focus-linux.png new file mode 100644 index 00000000000..4d7c67b44d6 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-middle-selected-focus-linux.png new file mode 100644 index 00000000000..ddc1c775383 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-focus-linux.png new file mode 100644 index 00000000000..fb4baf58a0c Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-middle-selected-focus-linux.png new file mode 100644 index 00000000000..7ac63ad0267 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-focus-linux.png new file mode 100644 index 00000000000..fb4baf58a0c Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-focus-linux.png new file mode 100644 index 00000000000..7fbc0be4b6f Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-middle-selected-focus-linux.png new file mode 100644 index 00000000000..dbf42d20f6b Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-middle-selected-focus-linux.png new file mode 100644 index 00000000000..7ac63ad0267 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-focus-linux.png new file mode 100644 index 00000000000..fb4baf58a0c Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-middle-selected-focus-linux.png new file mode 100644 index 00000000000..7ac63ad0267 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-focus-linux.png new file mode 100644 index 00000000000..e8510d4cb2f Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-middle-selected-focus-linux.png new file mode 100644 index 00000000000..222c7665940 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-focus-linux.png new file mode 100644 index 00000000000..ec551965ad6 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-middle-selected-focus-linux.png new file mode 100644 index 00000000000..1244095ef5b Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-focus-linux.png new file mode 100644 index 00000000000..e8510d4cb2f Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-focus-linux.png new file mode 100644 index 00000000000..577fa631cc5 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-middle-selected-focus-linux.png new file mode 100644 index 00000000000..581d281b9b6 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-middle-selected-focus-linux.png new file mode 100644 index 00000000000..222c7665940 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-focus-linux.png new file mode 100644 index 00000000000..e8510d4cb2f Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-middle-selected-focus-linux.png new file mode 100644 index 00000000000..222c7665940 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-focus-linux.png new file mode 100644 index 00000000000..aeecf7a19d0 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-middle-selected-focus-linux.png new file mode 100644 index 00000000000..43d517d0303 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-focus-linux.png new file mode 100644 index 00000000000..aeecf7a19d0 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-focus-linux.png new file mode 100644 index 00000000000..9254f893eac Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-middle-selected-focus-linux.png new file mode 100644 index 00000000000..27773d13dbd Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-middle-selected-focus-linux.png new file mode 100644 index 00000000000..43d517d0303 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-focus-linux.png new file mode 100644 index 00000000000..aeecf7a19d0 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-middle-selected-focus-linux.png new file mode 100644 index 00000000000..43d517d0303 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-focus-linux.png new file mode 100644 index 00000000000..3868e4cf385 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-middle-selected-focus-linux.png new file mode 100644 index 00000000000..ecd2387e714 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-focus-linux.png new file mode 100644 index 00000000000..09750b7423a Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-middle-selected-focus-linux.png new file mode 100644 index 00000000000..a4a35cb034c Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-focus-linux.png new file mode 100644 index 00000000000..3868e4cf385 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-focus-linux.png new file mode 100644 index 00000000000..677554c69e8 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-middle-selected-focus-linux.png new file mode 100644 index 00000000000..1633ea8850e Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-middle-selected-focus-linux.png new file mode 100644 index 00000000000..ecd2387e714 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-focus-linux.png new file mode 100644 index 00000000000..3868e4cf385 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-middle-selected-focus-linux.png new file mode 100644 index 00000000000..ecd2387e714 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-focus-linux.png new file mode 100644 index 00000000000..2e5383b1b12 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-middle-selected-focus-linux.png new file mode 100644 index 00000000000..0718a6c1106 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-focus-linux.png new file mode 100644 index 00000000000..2e5383b1b12 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-focus-linux.png new file mode 100644 index 00000000000..f16c69a2506 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-middle-selected-focus-linux.png new file mode 100644 index 00000000000..1c0f09782b0 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-middle-selected-focus-linux.png new file mode 100644 index 00000000000..0718a6c1106 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-middle-selected-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-focus-linux.png new file mode 100644 index 00000000000..2e5383b1b12 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-middle-selected-focus-linux.png b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-middle-selected-focus-linux.png new file mode 100644 index 00000000000..0718a6c1106 Binary files /dev/null and b/.playwright/snapshots/components/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-middle-selected-focus-linux.png differ diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts index 5868244d96f..1c7132775f6 100644 --- a/e2e/components/SegmentedControl.test.ts +++ b/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}) => { diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index 95099d8830b..5332330db85 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/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 const SegmentedControlButtonStyled = styled.button` + ${getGlobalFocusStyles('-1px')}; ${sx}; ` diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx index 4028260fc9f..89b877d8b6a 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/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 const SegmentedControlIconButtonStyled = styled.button` + ${getGlobalFocusStyles('-1px')}; ${sx}; `