Dropdown: fix high contrast styles in disabled state (microsoft#14176)

* Add high contrast adjust selector to dropdown styles * Change files * Change files * update choicegroup snapshot
joschect · Jul 23, 2020 · c0ba783 · c0ba783
1 parent 9f24389
commit c0ba783
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 4 deletions.
diff --git a/change/@fluentui-react-next-2020-07-23-02-46-39-a11y-dropdown.json b/change/@fluentui-react-next-2020-07-23-02-46-39-a11y-dropdown.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Add high contrast adjust selector to dropdown styles",
+  "packageName": "@fluentui/react-next",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-23T09:46:38.994Z"
+}
diff --git a/change/office-ui-fabric-react-2020-07-23-02-05-49-a11y-dropdown.json b/change/office-ui-fabric-react-2020-07-23-02-05-49-a11y-dropdown.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Add high contrast adjust selector to dropdown styles",
+  "packageName": "office-ui-fabric-react",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-23T09:05:49.407Z"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.styles.ts b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.styles.ts
@@ -11,6 +11,7 @@ import {
   HighContrastSelectorWhite,
   getScreenSelector,
   ScreenWidthMinMedium,
+  getEdgeChromiumNoHighContrastAdjustSelector,
 } from '../../Styling';
 
 const GlobalClassNames = {
@@ -307,7 +308,14 @@ export const getStyles: IStyleFunction<IDropdownStyleProps, IDropdownStyles> = p
         border: 'none',
         color: semanticColors.disabledText,
         cursor: 'default',
-        selectors: { [HighContrastSelector]: { border: '1px solid GrayText', color: 'GrayText' } },
+        selectors: {
+          [HighContrastSelector]: {
+            border: '1px solid GrayText',
+            color: 'GrayText',
+            backgroundColor: 'Window',
+          },
+          ...getEdgeChromiumNoHighContrastAdjustSelector(),
+        },
       },
     ],
     caretDownWrapper: [
@@ -326,7 +334,10 @@ export const getStyles: IStyleFunction<IDropdownStyleProps, IDropdownStyles> = p
     caretDown: [
       globalClassnames.caretDown,
       { color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },
-      disabled && { color: semanticColors.disabledText, selectors: { [HighContrastSelector]: { color: 'GrayText' } } },
+      disabled && {
+        color: semanticColors.disabledText,
+        selectors: { [HighContrastSelector]: { color: 'GrayText' }, ...getEdgeChromiumNoHighContrastAdjustSelector() },
+      },
     ],
     errorMessage: { color: semanticColors.errorText, ...theme.fonts.small, paddingTop: 5 },
     callout: [

diff --git a/...s/office-ui-fabric-react/src/components/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot b/...s/office-ui-fabric-react/src/components/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
@@ -316,9 +316,13 @@ exports[`Component Examples renders ChoiceGroup.Custom.Example.tsx correctly 1`]
                         white-space: nowrap;
                       }
                       @media screen and (-ms-high-contrast: active){& {
+                        background-color: Window;
                         border: 1px solid GrayText;
                         color: GrayText;
                       }
+                      @media screen and (forced-colors: active){& {
+                        forced-color-adjust: none;
+                      }
                   id="Dropdown2-option"
                   role="option"
                 >
@@ -354,6 +358,9 @@ exports[`Component Examples renders ChoiceGroup.Custom.Example.tsx correctly 1`]
                         @media screen and (-ms-high-contrast: active){& {
                           color: GrayText;
                         }
+                        @media screen and (forced-colors: active){& {
+                          forced-color-adjust: none;
+                        }
                     data-icon-name="ChevronDown"
                   >
                     

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Basic.Example.tsx.shot
@@ -388,9 +388,13 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
               white-space: nowrap;
             }
             @media screen and (-ms-high-contrast: active){& {
+              background-color: Window;
               border: 1px solid GrayText;
               color: GrayText;
             }
+            @media screen and (forced-colors: active){& {
+              forced-color-adjust: none;
+            }
         id="Dropdown1-option"
         role="option"
       >
@@ -426,6 +430,9 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
               @media screen and (-ms-high-contrast: active){& {
                 color: GrayText;
               }
+              @media screen and (forced-colors: active){& {
+                forced-color-adjust: none;
+              }
           data-icon-name="ChevronDown"
         >
           

diff --git a/packages/react-next/src/components/Dropdown/Dropdown.styles.ts b/packages/react-next/src/components/Dropdown/Dropdown.styles.ts
@@ -11,6 +11,7 @@ import {
   HighContrastSelectorWhite,
   getScreenSelector,
   ScreenWidthMinMedium,
+  getEdgeChromiumNoHighContrastAdjustSelector,
 } from '../../Styling';
 
 const GlobalClassNames = {
@@ -307,7 +308,14 @@ export const getStyles: IStyleFunction<IDropdownStyleProps, IDropdownStyles> = p
         border: 'none',
         color: semanticColors.disabledText,
         cursor: 'default',
-        selectors: { [HighContrastSelector]: { border: '1px solid GrayText', color: 'GrayText' } },
+        selectors: {
+          [HighContrastSelector]: {
+            border: '1px solid GrayText',
+            color: 'GrayText',
+            backgroundColor: 'Window',
+          },
+          ...getEdgeChromiumNoHighContrastAdjustSelector(),
+        },
       },
     ],
     caretDownWrapper: [
@@ -326,7 +334,10 @@ export const getStyles: IStyleFunction<IDropdownStyleProps, IDropdownStyles> = p
     caretDown: [
       globalClassnames.caretDown,
       { color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },
-      disabled && { color: semanticColors.disabledText, selectors: { [HighContrastSelector]: { color: 'GrayText' } } },
+      disabled && {
+        color: semanticColors.disabledText,
+        selectors: { [HighContrastSelector]: { color: 'GrayText' }, ...getEdgeChromiumNoHighContrastAdjustSelector() },
+      },
     ],
     errorMessage: { color: semanticColors.errorText, ...theme.fonts.small, paddingTop: 5 },
     callout: [