Fixing high contrast Menu Item's focus + active state (#19393)

* updating high contrast colors * reverting style * updating changelog * removing test * fixing hover
microsoft · Aug 19, 2021 · 28c579a · 28c579a
1 parent 1bcd7d8
commit 28c579a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git 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
@@ -76,6 +76,9 @@ export const menuItemWrapperStyles: ComponentSlotStylesPrepared<MenuItemWrapperS
       // active styles
       ...(active && {
         color: v.wrapperColorActive,
+        ...(!underlined && {
+          background: v.backgroundColorActive,
+        }),
 
         ...(!underlined &&
           on !== 'hover' && {