chore: Add documentation to Progress about reduced-motion (#25563)

* chore: Add documentation to Progress about reduced-motion * change file
microsoft · Nov 7, 2022 · d8dec99 · d8dec99
1 parent 4606358
commit d8dec99
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 0 deletions.
diff --git a/change/@fluentui-react-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json b/change/@fluentui-react-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add styling and documentation for reduced-motion",
+  "packageName": "@fluentui/react-progress",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-progress/Spec.md b/packages/react-components/react-progress/Spec.md
@@ -121,3 +121,4 @@ The Progress is non-interactive.
 ## Accessibility
 
 - The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.
+- When `reduced-motion` is active, the `indeterminate` `Progress` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `Progress` bar.
diff --git a/packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts b/packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts
@@ -98,6 +98,10 @@ const useBarStyles = makeStyles({
     animationName: indeterminateProgress,
     animationDuration: '3s',
     animationIterationCount: 'infinite',
+    '@media screen and (prefers-reduced-motion: reduce)': {
+      animationDuration: '0.01ms',
+      animationIterationCount: '1',
+    },
   },
 
   rtl: {

diff --git a/...s/react-components/react-progress/src/stories/Progress/ProgressBestPractices.md b/...s/react-components/react-progress/src/stories/Progress/ProgressBestPractices.md
@@ -6,6 +6,7 @@
 - Display operation description
 - Show text above and/or below the bar
 - Combine steps of a single operation into one bar
+- Use `ProgressField` to add a `description` and `hint` message for the `indeterminate` `Progress` when `reduced-motion` is active
 
 ### Don't
Original file line number	Diff line number	Diff line change
Expand Up		@@ -121,3 +121,4 @@ The Progress is non-interactive.
		## Accessibility

		- The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.
		- When `reduced-motion` is active, the `indeterminate` `Progress` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `Progress` bar.