From c0ba783ab53821e4a70f61f823e87ca240a9665a Mon Sep 17 00:00:00 2001 From: tomi-msft <66456876+tomi-msft@users.noreply.github.com> Date: Thu, 23 Jul 2020 10:10:47 -0700 Subject: [PATCH] Dropdown: fix high contrast styles in disabled state (#14176) * Add high contrast adjust selector to dropdown styles * Change files * Change files * update choicegroup snapshot --- ...ct-next-2020-07-23-02-46-39-a11y-dropdown.json | 8 ++++++++ ...c-react-2020-07-23-02-05-49-a11y-dropdown.json | 8 ++++++++ .../src/components/Dropdown/Dropdown.styles.ts | 15 +++++++++++++-- .../ChoiceGroup.Custom.Example.tsx.shot | 7 +++++++ .../__snapshots__/Dropdown.Basic.Example.tsx.shot | 7 +++++++ .../src/components/Dropdown/Dropdown.styles.ts | 15 +++++++++++++-- 6 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 change/@fluentui-react-next-2020-07-23-02-46-39-a11y-dropdown.json create mode 100644 change/office-ui-fabric-react-2020-07-23-02-05-49-a11y-dropdown.json 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 new file mode 100644 index 0000000000000..66af92fdb9672 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..28670134f82cf --- /dev/null +++ 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 index ff2720a6bf319..7e5cefef39014 100644 --- 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 = 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 = 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/packages/office-ui-fabric-react/src/components/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot index 35e78041aa929..be0a6a8c74542 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot +++ b/packages/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 index 5be8b0a313d09..6442b9b0fab9b 100644 --- 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 index d86a54b4d5312..2d13998b2d9cd 100644 --- 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 = 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 = 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: [