fix(v8 ColorSwatchPicker): Add border to white color in high contrast…

… mode (#33136)
microsoft · Oct 24, 2024 · 62e24ae · 62e24ae
1 parent 23f7636
commit 62e24ae
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/change/@fluentui-react-e3da4668-61a1-4a12-a488-fd618c230554.json b/change/@fluentui-react-e3da4668-61a1-4a12-a488-fd618c230554.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(v8 ColorSwatchPicker): Add border to white color in high contrast mode",
+  "packageName": "@fluentui/react",
+  "email": "jiangemma@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts b/packages/react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts
@@ -134,6 +134,11 @@ export const getStyles = (props: IColorPickerGridCellStyleProps): IColorPickerGr
           // fake a border for white
           backgroundColor: buttonBorderIsWhite,
           padding: 1,
+          selectors: {
+            [HighContrastSelector]: {
+              outline: `1px solid ButtonText`,
+            },
+          },
         },
     ],
     // the <svg> that holds the color

diff --git a/...ages/react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap b/...ages/react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
@@ -2226,6 +2226,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 }
                 @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
                   border-color: Window;
+                  outline: 1px solid ButtonText;
                 }
                 .ms-Fabric--isFocusVisible &:focus::after {
                   border-color: #605e5c;