fix: add high contrast forced-color-adjust in styles for menu-item co…

…mponent (#16009) * add forced color adjust to host selector * Change files
microsoft · Nov 20, 2020 · cfd0cc9 · cfd0cc9
1 parent f1c0db2
commit cfd0cc9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-2020-11-19-14-21-59-users-khamu-menu-item-hover-hc.json b/change/@fluentui-web-components-2020-11-19-14-21-59-users-khamu-menu-item-hover-hc.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "add forced color adjust to host selector",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-11-19T22:21:59.223Z"
+}
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -67,7 +67,7 @@ export const MenuItemStyles = css`
     .end,
     ::slotted(svg) {
         ${
-          /* Glyph size and margin-left is temporary - 
+          /* Glyph size and margin-left is temporary -
             replace when adaptive typography is figured out */ ''
         } width: 16px;
         height: 16px;
@@ -90,6 +90,7 @@ export const MenuItemStyles = css`
   forcedColorsStylesheetBehavior(
     css`
             :host {
+                forced-color-adjust: none;
                 border-color: transparent;
                 color: ${SystemColors.ButtonText};
                 fill: ${SystemColors.ButtonText};