From e5c8581ecdcb73e5e45289c3975563c15a99a6c2 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 5 Jun 2023 14:37:55 -0700 Subject: [PATCH 1/7] buttons a11y fix: subtle hover icon color and transparent text color --- .../Button/useButtonStyles.styles.ts | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts index d57a6783b323e..1daa6cfeac535 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts @@ -208,6 +208,23 @@ const useRootStyles = makeStyles({ color: tokens.colorNeutralForeground2BrandPressed, }, }, + + '@media (forced-colors: active)': { + ':hover': { + color: 'canvas', + + [`& .${buttonClassNames.icon}`]: { + color: 'canvas', + }, + }, + ':hover:active': { + color: 'canvas', + + [`& .${buttonClassNames.icon}`]: { + color: 'canvas', + }, + }, + }, }, transparent: { backgroundColor: tokens.colorTransparentBackground, @@ -225,6 +242,19 @@ const useRootStyles = makeStyles({ ...shorthands.borderColor('transparent'), color: tokens.colorNeutralForeground2BrandPressed, }, + + '@media (forced-colors: active)': { + ':hover': { + backgroundColor: tokens.colorTransparentBackgroundHover, + ...shorthands.borderColor('transparent'), + color: 'Highlight', + }, + ':hover:active': { + backgroundColor: tokens.colorTransparentBackgroundHover, + ...shorthands.borderColor('transparent'), + color: 'Highlight', + }, + }, }, // Shape variations From c6b1820aeb1aea502d60227c84e26646bff056d2 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 5 Jun 2023 14:43:43 -0700 Subject: [PATCH 2/7] compound button, subtle secondary content color fix --- .../useCompoundButtonStyles.styles.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts index 41501e16a65cc..3ba6d073a0f4f 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts @@ -96,6 +96,19 @@ const useRootStyles = makeStyles({ color: tokens.colorNeutralForeground2Pressed, }, }, + + '@media (forced-colors: active)': { + ':hover': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'canvas', + }, + }, + ':hover:active': { + [`& .${compoundButtonClassNames.secondaryContent}`]: { + color: 'canvas', + }, + }, + }, }, transparent: { [`& .${compoundButtonClassNames.secondaryContent}`]: { From ac2f864d1d4173ce3d2c9de296b29a86c6bcdc2c Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 5 Jun 2023 18:58:34 -0700 Subject: [PATCH 3/7] changefile --- ...-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json diff --git a/change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json b/change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json new file mode 100644 index 0000000000000..7005632f89612 --- /dev/null +++ b/change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: high contrast mode hover style icon fixes", + "packageName": "@fluentui/react-button", + "email": "eysjiang@gmail.com", + "dependentChangeType": "patch" +} From 5d16549ef612d4eaf1954ed69e20dd7571f008c8 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 5 Jun 2023 21:30:57 -0700 Subject: [PATCH 4/7] menubutton high contrast fix --- .../MenuButton/useMenuButtonStyles.styles.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts index 2c4a2062bb956..7c88ae319b443 100644 --- a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts @@ -62,6 +62,14 @@ const useIconExpandedStyles = makeStyles({ transparent: { color: tokens.colorNeutralForeground2BrandSelected, }, + highContrast: { + // High contrast styles + '@media (forced-colors: active)': { + ':hover': { + color: 'canvas', + }, + }, + }, }); const useMenuIconStyles = makeStyles({ @@ -110,7 +118,7 @@ export const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButton if (state.icon) { state.icon.className = mergeClasses( menuButtonClassNames.icon, - state.root['aria-expanded'] && iconExpandedStyles[state.appearance], + state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className, ); } From 1b9ea724d893938b815f638ce3a4c970327c03ff Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 5 Jun 2023 23:01:31 -0700 Subject: [PATCH 5/7] fix icon colors in togglebutton, in high contrast --- .../ToggleButton/useToggleButtonStyles.styles.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts index eb59db2e7e488..f788f0bfc882b 100644 --- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts @@ -215,6 +215,12 @@ const useIconCheckedStyles = makeStyles({ subtleOrTransparent: { color: tokens.colorNeutralForeground2BrandSelected, }, + // High contrast styles + highContrast: { + '@media (forced-colors: active)': { + forcedColorAdjust: 'auto', + }, + }, }); const usePrimaryHighContrastStyles = makeStyles({ @@ -272,7 +278,9 @@ export const useToggleButtonStyles_unstable = (state: ToggleButtonState): Toggle if (state.icon) { state.icon.className = mergeClasses( toggleButtonClassNames.icon, - (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, + (appearance === 'subtle' || appearance === 'transparent') && + iconCheckedStyles.subtleOrTransparent && + iconCheckedStyles.highContrast, state.icon.className, ); } From c659469e3ad2b53a3256885b33533f400604151f Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 5 Jun 2023 23:24:35 -0700 Subject: [PATCH 6/7] capitalization --- .../src/components/Button/useButtonStyles.styles.ts | 8 ++++---- .../components/MenuButton/useMenuButtonStyles.styles.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts index 1daa6cfeac535..667c7429e3f9d 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts @@ -211,17 +211,17 @@ const useRootStyles = makeStyles({ '@media (forced-colors: active)': { ':hover': { - color: 'canvas', + color: 'Canvas', [`& .${buttonClassNames.icon}`]: { - color: 'canvas', + color: 'Canvas', }, }, ':hover:active': { - color: 'canvas', + color: 'Canvas', [`& .${buttonClassNames.icon}`]: { - color: 'canvas', + color: 'Canvas', }, }, }, diff --git a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts index 7c88ae319b443..5eb7412fdced4 100644 --- a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts @@ -66,7 +66,7 @@ const useIconExpandedStyles = makeStyles({ // High contrast styles '@media (forced-colors: active)': { ':hover': { - color: 'canvas', + color: 'Canvas', }, }, }, From e6b36aab517c24e75804609173736a7ae6ac9654 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Mon, 5 Jun 2023 23:28:59 -0700 Subject: [PATCH 7/7] capitalization --- .../CompoundButton/useCompoundButtonStyles.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts index 3ba6d073a0f4f..91960bde0be56 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts +++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts @@ -100,12 +100,12 @@ const useRootStyles = makeStyles({ '@media (forced-colors: active)': { ':hover': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: 'canvas', + color: 'Canvas', }, }, ':hover:active': { [`& .${compoundButtonClassNames.secondaryContent}`]: { - color: 'canvas', + color: 'Canvas', }, }, },