fix: High contrast mode hover style icon fixes in react-button compon…

…ents (microsoft#28156) * buttons a11y fix: subtle hover icon color and transparent text color * compound button, subtle secondary content color fix * changefile * menubutton high contrast fix * fix icon colors in togglebutton, in high contrast * capitalization * capitalization
chpalac · Jul 20, 2023 · 638b05a · 638b05a
1 parent 14804fe
commit 638b05a
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 2 deletions.
diff --git a/change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json 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"
+}
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
@@ -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

diff --git a/...t-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/...t-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}`]: {

diff --git a/...ges/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts b/...ges/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,
     );
   }

diff --git a/...react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/...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,
     );
   }