fix(web-components): prefers-reduced-motion media query in button (#3…

…3034)
microsoft · Oct 14, 2024 · eaccd58 · eaccd58
1 parent 9325579
commit eaccd58
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-941a8116-c21a-4ade-b542-db2e8a43500b.json b/change/@fluentui-web-components-941a8116-c21a-4ade-b542-db2e8a43500b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix prefers-reduced-motion media query in button",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
@@ -128,7 +128,9 @@ export const baseButtonStyles = css`
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
-    transition-duration: 0.01ms;
+    :host {
+      transition-duration: 0.01ms;
+    }
   }
 
   ::slotted(svg) {