From d8dec99eae6f1138d8dade6ec57663916a348762 Mon Sep 17 00:00:00 2001
From: tomi-msft <66456876+tomi-msft@users.noreply.github.com>
Date: Mon, 7 Nov 2022 13:45:55 -0800
Subject: [PATCH] chore: Add documentation to Progress about reduced-motion
 (#25563)

* chore: Add documentation to Progress about reduced-motion

* change file
---
 ...eact-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json | 7 +++++++
 packages/react-components/react-progress/Spec.md           | 1 +
 .../src/components/Progress/useProgressStyles.ts           | 4 ++++
 .../src/stories/Progress/ProgressBestPractices.md          | 1 +
 4 files changed, 13 insertions(+)
 create mode 100644 change/@fluentui-react-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json

diff --git a/change/@fluentui-react-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json b/change/@fluentui-react-progress-a07a5cfc-ad88-4e76-a0ff-6f8e69c30c66.json
new file mode 100644
index 00000000000000..b538924d34e21d
--- /dev/null
+++ 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": "ololubek@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-progress/Spec.md b/packages/react-components/react-progress/Spec.md
index a7ae7cd1719472..75de53546c9255 100644
--- 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
index 0260955aa86602..3a9a1dd6ddd40c 100644
--- 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/packages/react-components/react-progress/src/stories/Progress/ProgressBestPractices.md b/packages/react-components/react-progress/src/stories/Progress/ProgressBestPractices.md
index 54b3b1504fe391..6ea9714847e3f4 100644
--- a/packages/react-components/react-progress/src/stories/Progress/ProgressBestPractices.md
+++ b/packages/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