Spinner: Fix HC styling for spinner to show spinner color (microsoft#…

…14372) * Spinner: Fix HC styling of spinner componet to show highlight color * Change files * update snapshots
czearing · Aug 6, 2020 · d438d07 · d438d07
1 parent aea3a8b
commit d438d07
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/change/office-ui-fabric-react-2020-08-05-15-38-44-a11y-spinner.json b/change/office-ui-fabric-react-2020-08-05-15-38-44-a11y-spinner.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Spinner: Fix HC styling of spinner componet to show highlight color",
+  "packageName": "office-ui-fabric-react",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-05T22:38:43.868Z"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.styles.tsx
@@ -1,5 +1,11 @@
 import { ISpinnerStyleProps, ISpinnerStyles, SpinnerSize } from './Spinner.types';
-import { hiddenContentStyle, keyframes, HighContrastSelector, getGlobalClassNames } from '../../Styling';
+import {
+  hiddenContentStyle,
+  keyframes,
+  HighContrastSelector,
+  getGlobalClassNames,
+  getEdgeChromiumNoHighContrastAdjustSelector,
+} from '../../Styling';
 import { memoizeFunction } from '../../Utilities';
 
 const GlobalClassNames = {
@@ -61,6 +67,7 @@ export const getStyles = (props: ISpinnerStyleProps): ISpinnerStyles => {
           [HighContrastSelector]: {
             borderTopColor: 'Highlight',
           },
+          ...getEdgeChromiumNoHighContrastAdjustSelector(),
         },
       },
       size === SpinnerSize.xSmall && [

diff --git a/packages/office-ui-fabric-react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap
@@ -30,6 +30,9 @@ exports[`Spinner renders Spinner correctly 1`] = `
         @media screen and (-ms-high-contrast: active){& {
           border-top-color: Highlight;
         }
+        @media screen and (forced-colors: active){& {
+          forced-color-adjust: none;
+        }
   />
   <div
     className=

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Basic.Example.tsx.shot
@@ -100,6 +100,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>
@@ -181,6 +184,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>
@@ -262,6 +268,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>
@@ -343,6 +352,9 @@ exports[`Component Examples renders Spinner.Basic.Example.tsx correctly 1`] = `
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
     </div>
   </div>

diff --git a/...ages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Labeled.Example.tsx.shot b/...ages/office-ui-fabric-react/src/components/__snapshots__/Spinner.Labeled.Example.tsx.shot
@@ -80,6 +80,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=
@@ -159,6 +162,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=
@@ -238,6 +244,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=
@@ -317,6 +326,9 @@ exports[`Component Examples renders Spinner.Labeled.Example.tsx correctly 1`] =
             @media screen and (-ms-high-contrast: active){& {
               border-top-color: Highlight;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
       />
       <div
         className=