fix: update color on active state for accent button in high contrast …

…mode (#18246) * add active state on accent button for high contrast * Change files
microsoft · May 19, 2021 · d93694f · d93694f
1 parent a9eda24
commit d93694f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-188e5592-2326-4e9c-99b5-38b5f81bac7f.json b/change/@fluentui-web-components-188e5592-2326-4e9c-99b5-38b5f81bac7f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add active state on accent button for high contrast",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
@@ -203,7 +203,8 @@ export const AccentButtonStyles = css`
             color: ${SystemColors.HighlightText};
         }
 
-        :host([appearance="accent"]) .control:hover {
+        :host([appearance="accent"]) .control:hover,
+        :host([appearance="accent"]:active) .control:active {
             background: ${SystemColors.HighlightText};
             border-color: ${SystemColors.Highlight};
             color: ${SystemColors.Highlight};