Add polyfill for CSS @media prefers-reduced-motion

Author: ksheedlo

packages/benchmarks/perf/mocks/react-native.js

@@ -9,6 +9,13 @@
  * React Native mock for Node.js benchmarks
  */
 
+export const AccessibilityInfo = {
+  addEventListener: () => ({
+    remove: () => {}
+  }),
+  isReduceMotionEnabled: () => Promise.resolve(false)
+};
+
 export const Animated = {
   createAnimatedComponent(c) {
     return c;

packages/react-strict-dom/src/native/css/index.js

@@ -123,6 +123,7 @@ type ResolveStyleOptions = $ReadOnly<{
   fontSize?: ?number,
   hover?: ?boolean,
   inheritedFontSize: ?number,
+  prefersReducedMotion: boolean,
   viewportHeight: number,
   viewportScale: number | void,
   viewportWidth: number,
@@ -145,6 +146,7 @@ function resolveStyle(
     fontSize: _fontSize,
     hover,
     inheritedFontSize,
+    prefersReducedMotion,
     viewportHeight,
     viewportScale = 1,
     viewportWidth
@@ -246,7 +248,8 @@ function resolveStyle(
           const matches = mediaQueryMatches(
             variant,
             viewportWidth,
-            viewportHeight
+            viewportHeight,
+            prefersReducedMotion
           );
           if (matches) {
             activeVariant = variant;

packages/react-strict-dom/src/native/css/mediaQueryMatches.js

@@ -14,13 +14,15 @@ const MEDIA = '@media';
 export function mediaQueryMatches(
   query: string,
   width: number,
-  height: number
+  height: number,
+  prefersReducedMotion: boolean
 ): boolean {
   const q = query.split(MEDIA)[1];
   return mediaQuery.match(q, {
     width: width,
     height: height,
     orientation: width > height ? 'landscape' : 'portrait',
-    'aspect-ratio': width / height
+    'aspect-ratio': width / height,
+    'prefers-reduced-motion': prefersReducedMotion ? 'reduce' : 'no-preference'
   });
 }

packages/react-strict-dom/src/native/modules/__tests__/mediaQuery-test.js

@@ -80,6 +80,38 @@ describe('mediaQuery.match()', function () {
       ).toBe(false);
     });
 
+    test('prefers-reduced-motion: should return true for a correct match (===)', function () {
+      expect(
+        mediaQuery.match('(prefers-reduced-motion: reduce)', {
+          'prefers-reduced-motion': 'reduce'
+        })
+      ).toBe(true);
+    });
+
+    test('prefers-reduced-motion: should return false for an incorrect match (===)', function () {
+      expect(
+        mediaQuery.match('(prefers-reduced-motion: reduce)', {
+          'prefers-reduced-motion': 'no-preference'
+        })
+      ).toBe(false);
+    });
+
+    test('prefers-reduced-motion: should return true for matched default', function () {
+      expect(
+        mediaQuery.match('(prefers-reduced-motion)', {
+          'prefers-reduced-motion': 'reduce'
+        })
+      ).toBe(true);
+    });
+
+    test('prefers-reduced-motion: should return false for not matching default', function () {
+      expect(
+        mediaQuery.match('(prefers-reduced-motion)', {
+          'prefers-reduced-motion': 'no-preference'
+        })
+      ).toBe(false);
+    });
+
     test('scan: should return true for a correct match (===)', function () {
       expect(
         mediaQuery.match('(scan: progressive)', { scan: 'progressive' })

packages/react-strict-dom/src/native/modules/mediaQuery.js

@@ -82,7 +82,14 @@ function matchQuery(mediaQuery, values) {
         return false;
       }
 
+      // prefers-reduce-motion without a keyword value is equivalent to
+      // prefers-reduced-motion: reduce.
+      if (feature === 'prefers-reduced-motion' && !expValue) {
+        expValue = 'reduce';
+      }
+
       switch (feature) {
+        case 'prefers-reduced-motion':
         case 'orientation':
         case 'scan':
           return value.toLowerCase() === expValue.toLowerCase();

packages/react-strict-dom/src/native/modules/mediaQuery.js.flow

@@ -13,7 +13,8 @@ type Values = $ReadOnly<{
   height?: number,
   orientation?: 'landscape' | 'portrait',
   'aspect-ratio'?: number,
-  direction?: 'ltr' | 'rtl'
+  direction?: 'ltr' | 'rtl',
+  'prefers-reduced-motion'?: 'reduce' | 'no-preference',
 }>;
 
 declare export const mediaQuery : {

packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import * as ReactNative from '../react-native';
+
+import { useEffect, useState } from 'react';
+
+export function usePrefersReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  useEffect(() => {
+    // 1. Get the initial value of reduce motion
+    ReactNative.AccessibilityInfo.isReduceMotionEnabled().then(
+      (isReduceMotionEnabled) => {
+        setPrefersReducedMotion(isReduceMotionEnabled);
+      }
+    );
+
+    // 2. Subscribe to changes in reduce motion
+    const reduceMotionChangedSubscription =
+      ReactNative.AccessibilityInfo.addEventListener(
+        'reduceMotionChanged',
+        (isReduceMotionEnabled) => {
+          setPrefersReducedMotion(isReduceMotionEnabled);
+        }
+      );
+
+    return () => {
+      reduceMotionChangedSubscription.remove();
+    };
+  }, []);
+
+  return prefersReducedMotion;
+}

packages/react-strict-dom/src/native/modules/useStyleProps.js

@@ -15,6 +15,7 @@ import * as css from '../css';
 import * as ReactNative from '../react-native';
 
 import { useInheritedStyles } from './ContextInheritedStyles';
+import { usePrefersReducedMotion } from './usePrefersReducedMotion';
 import { usePseudoStates } from './usePseudoStates';
 import { useStyleTransition } from './useStyleTransition';
 import { useViewportScale } from './ContextViewportScale';
@@ -120,6 +121,7 @@ export function useStyleProps(
   } = useInheritedStyles();
 
   const { active, focus, hover, handlers } = usePseudoStates(flatStyle);
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   // Get the computed style props
   const styleProps = css.props.call(
@@ -132,6 +134,7 @@ export function useStyleProps(
       hover,
       inheritedFontSize:
         typeof inheritedFontSize === 'number' ? inheritedFontSize : undefined,
+      prefersReducedMotion,
       viewportHeight: height,
       viewportScale,
       viewportWidth: width

packages/react-strict-dom/src/native/react-native/index.js

@@ -8,6 +8,7 @@
  */
 
 export {
+  AccessibilityInfo,
   Animated,
   Easing,
   Image,

packages/react-strict-dom/tests/__mocks__/react-native/index.js

@@ -5,6 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+export const AccessibilityInfo = {
+  addEventListener: jest.fn().mockReturnValue({ remove: jest.fn() }),
+  isReduceMotionEnabled: jest.fn().mockReturnValue(Promise.resolve(false))
+};
+
 export const Animated = {
   createAnimatedComponent(Component) {
     return `Animated.${Component}`;