From 17c5cdf38b08ba682801a9d703e5c7904089e506 Mon Sep 17 00:00:00 2001
From: mainframev <vgenaev@gmail.com>
Date: Wed, 21 Oct 2026 22:49:09 +0200
Subject: [PATCH] fix: use Highlight/HighlightText for MenuItem hover and
 open-submenu states in forced colors mode

---
 .../@fluentui-react-menu-hc-hover-18832.json  |  7 ++++++
 .../MenuItem/useMenuItemStyles.styles.ts      | 24 ++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 change/@fluentui-react-menu-hc-hover-18832.json

diff --git a/change/@fluentui-react-menu-hc-hover-18832.json b/change/@fluentui-react-menu-hc-hover-18832.json
new file mode 100644
index 00000000000000..b049c0f0833612
--- /dev/null
+++ b/change/@fluentui-react-menu-hc-hover-18832.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use Highlight/HighlightText for MenuItem hover and open-submenu states in forced colors mode",
+  "packageName": "@fluentui/react-menu",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
index 7439fccbc1ce25..a45d2a4c6f2ee8 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -19,6 +19,8 @@ export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
   subText: 'fui-MenuItem__subText',
 };
 
+const slotsSelector = `& .${menuItemClassNames.icon}, & .${menuItemClassNames.checkmark}, & .${menuItemClassNames.subText}, & .${menuItemClassNames.secondaryContent}`;
+
 const useRootBaseStyles = makeResetStyles({
   borderRadius: tokens.borderRadiusMedium,
   position: 'relative',
@@ -69,9 +71,13 @@ const useRootBaseStyles = makeResetStyles({
   // High contrast styles
   '@media (forced-colors: active)': {
     ':hover': {
-      backgroundColor: 'Canvas',
-      borderColor: 'Highlight',
-      color: 'Highlight',
+      forcedColorAdjust: 'none',
+      backgroundColor: 'Highlight',
+      color: 'HighlightText',
+
+      [slotsSelector]: {
+        color: 'HighlightText',
+      },
     },
     ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),
   },
@@ -166,8 +172,13 @@ const useStyles = makeStyles({
     },
 
     '@media (forced-colors: active)': {
-      backgroundColor: 'Canvas',
-      color: 'Highlight',
+      forcedColorAdjust: 'none',
+      backgroundColor: 'Highlight',
+      color: 'HighlightText',
+
+      [slotsSelector]: {
+        color: 'HighlightText',
+      },
     },
   },
   disabled: {
@@ -206,13 +217,14 @@ const useStyles = makeStyles({
     '@media (forced-colors: active)': {
       color: 'GrayText',
       ':hover': {
+        forcedColorAdjust: 'auto',
         color: 'GrayText',
         backgroundColor: 'Canvas',
         [`& .${menuItemClassNames.icon}`]: {
           color: 'GrayText',
           backgroundColor: 'Canvas',
         },
-        [`& .${menuItemClassNames.subText}`]: {
+        [slotsSelector]: {
           color: 'GrayText',
         },
       },