Merge pull request storybookjs#13711 from storybookjs/feature/remove-…

…animation-backgrounds-a11y Addon-backgrounds: Respect user's reduced motion settings
abue9 · Jul 13, 2021 · c399d5e · c399d5e
2 parents 783cfd3 + 6db035b
commit c399d5e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/addons/backgrounds/src/decorators/withBackground.ts b/addons/backgrounds/src/decorators/withBackground.ts
@@ -1,7 +1,12 @@
 import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { clearStyles, addBackgroundStyle, getBackgroundColorByName } from '../helpers';
+import {
+  clearStyles,
+  addBackgroundStyle,
+  getBackgroundColorByName,
+  isReduceMotionEnabled,
+} from '../helpers';
 
 export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
   const { globals, parameters } = context;
@@ -29,10 +34,11 @@ export const withBackground = (StoryFn: StoryFunction, context: StoryContext) =>
     context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
 
   const backgroundStyles = useMemo(() => {
+    const transitionStyle = 'transition: background-color 0.3s;';
     return `
       ${selector} {
         background: ${selectedBackgroundColor} !important;
-        transition: background-color 0.3s;
+        ${isReduceMotionEnabled() ? '' : transitionStyle}
       }
     `;
   }, [selectedBackgroundColor, selector]);

diff --git a/addons/backgrounds/src/helpers/index.ts b/addons/backgrounds/src/helpers/index.ts
@@ -5,7 +5,12 @@ import { logger } from '@storybook/client-logger';
 
 import { Background } from '../types';
 
-const { document } = global;
+const { document, window } = global;
+
+export const isReduceMotionEnabled = () => {
+  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  return prefersReduceMotion.matches;
+};
 
 export const getBackgroundColorByName = (
   currentSelectedValue: string,