From 28c579ac8d2f6128d33ed1a3357ca6ba6f2ee7f5 Mon Sep 17 00:00:00 2001
From: Andrew Martin <andmarti@microsoft.com>
Date: Thu, 19 Aug 2021 11:33:13 -0700
Subject: [PATCH] Fixing high contrast Menu Item's focus + active state
 (#19393)

* updating high contrast colors

* reverting style

* updating changelog

* removing test

* fixing hover
---
 packages/fluentui/CHANGELOG.md                                 | 1 +
 .../src/themes/teams/components/Menu/menuItemWrapperStyles.ts  | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index a501555c6bcd2e..1420444d6f287b 100644
--- a/packages/fluentui/CHANGELOG.md
+++ b/packages/fluentui/CHANGELOG.md
@@ -45,6 +45,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Tooltip` flickering in multi-window use case @yuanboxue-amber ([#19235](https://github.com/microsoft/fluentui/pull/19235))
 - Fix `Datepicker` input @yuanboxue-amber ([#19261](https://github.com/microsoft/fluentui/pull/19261))
 - Fix `Dialog` styles border radius changed @bcalvery ([#19328](https://github.com/microsoft/fluentui/pull/19328))
+- Fix `Menu` high contrast focus for submenus @notandrew ([#19393](https://github.com/microsoft/fluentui/pull/19393))
 - Fix `Card` HC styles on hover @chassunc ([#19382](https://github.com/microsoft/fluentui/pull/19382))
 - Add `AppsIcon`, `AppFolderIcon`, `PageFitIcon`, `SubtractIcon` @notandrew ([#19424](https://github.com/microsoft/fluentui/pull/19424))
 - Fix `Dialog` background in teams dark v2  @chassunc ([#19434](https://github.com/microsoft/fluentui/pull/19434))
diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts
index 66648a1fad8579..3f23a27ef2136c 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts
@@ -76,6 +76,9 @@ export const menuItemWrapperStyles: ComponentSlotStylesPrepared<MenuItemWrapperS
       // active styles
       ...(active && {
         color: v.wrapperColorActive,
+        ...(!underlined && {
+          background: v.backgroundColorActive,
+        }),
 
         ...(!underlined &&
           on !== 'hover' && {