feat(VisualPageIndicator): add in reduce motion support

chanzuckerberg · Dec 18, 2024 · b64eb45 · b64eb45
1 parent f00c65d
commit b64eb45
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/VisualPageIndicator/VisualPageIndicator.module.css b/src/components/VisualPageIndicator/VisualPageIndicator.module.css
@@ -25,4 +25,10 @@
 
 .visual-page-indicator--active {
     --visual-page-indicator-bg: var(--eds-theme-color-background-visual-page-indicator-current);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .visual-page-indicator__item {
+        transition: none;
+    }
 }
diff --git a/src/components/VisualPageIndicator/VisualPageIndicator.stories.ts b/src/components/VisualPageIndicator/VisualPageIndicator.stories.ts
@@ -34,4 +34,4 @@ export const FivePages: StoryObj<Args> = {
   },
 };
 
-// TODO-AH: add implementation example showing usage of state with a label for a11y handling
+// TODO: add implementation example showing usage of state with a label for a11y handling
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,4 +34,4 @@ export const FivePages: StoryObj<Args> = { @@
       },
     };
-    // TODO-AH: add implementation example showing usage of state with a label for a11y handling
+    // TODO: add implementation example showing usage of state with a label for a11y handling