support older browser with MediaQueryList

pmndrs · Sep 29, 2021 · b913ecf · b913ecf
1 parent 644ede5
commit b913ecf
Showing 1 changed file with 23 additions and 11 deletions.
diff --git a/src/A11yUserPreferences.tsx b/src/A11yUserPreferences.tsx
@@ -58,23 +58,35 @@ export const A11yUserPreferences: React.FC<Props> = ({ children }) => {
       });
     };
 
-    prefersReducedMotionMediaQuery.addEventListener(
-      'change',
-      handleReducedMotionPrefChange
-    );
-    prefersDarkSchemeMediaQuery.addEventListener(
-      'change',
-      handleDarkSchemePrefChange
-    );
-    return () => {
-      prefersReducedMotionMediaQuery.removeEventListener(
+    if (typeof prefersReducedMotionMediaQuery.addEventListener === 'function') {
+      prefersReducedMotionMediaQuery.addEventListener(
         'change',
         handleReducedMotionPrefChange
       );
-      prefersDarkSchemeMediaQuery.removeEventListener(
+    }
+    if (typeof prefersDarkSchemeMediaQuery.addEventListener === 'function') {
+      prefersDarkSchemeMediaQuery.addEventListener(
         'change',
         handleDarkSchemePrefChange
       );
+    }
+    return () => {
+      if (
+        typeof prefersReducedMotionMediaQuery.removeEventListener === 'function'
+      ) {
+        prefersReducedMotionMediaQuery.removeEventListener(
+          'change',
+          handleReducedMotionPrefChange
+        );
+      }
+      if (
+        typeof prefersDarkSchemeMediaQuery.removeEventListener === 'function'
+      ) {
+        prefersDarkSchemeMediaQuery.removeEventListener(
+          'change',
+          handleDarkSchemePrefChange
+        );
+      }
     };
   }, []);