chore: Use ownerDocument.defaultView for isMotionDisabled (#102)

Author: abdhalees

src/internal/visual-mode/__tests__/motion.test.tsx

@@ -69,4 +69,21 @@ describe('isMotionDisabled', () => {
     const element = renderResult.container.querySelector('#test-element') as HTMLElement;
     expect(isMotionDisabled(element)).toEqual(true);
   });
+
+  test('should default to false when an error is thrown and a warning is logged', () => {
+    matchMedia.mockReturnValue(null);
+
+    const warnSpy = jest.spyOn(console, 'warn');
+
+    const renderResult = render(
+      <div>
+        <div id="test-element">Content</div>
+      </div>
+    );
+    const element = renderResult.container.querySelector('#test-element') as HTMLElement;
+
+    expect(isMotionDisabled(element)).toEqual(false);
+
+    expect(warnSpy).toHaveBeenCalled();
+  });
 });

src/internal/visual-mode/index.ts

@@ -9,10 +9,20 @@ import { isDevelopment } from '../is-development';
 import { warnOnce } from '../logging';
 import { awsuiVisualRefreshFlag, getGlobal } from '../global-flags';
 
+function safeMatchMedia(element: HTMLElement, query: string) {
+  try {
+    const targetWindow = element.ownerDocument?.defaultView ?? window;
+    return targetWindow.matchMedia?.(query).matches ?? false;
+  } catch (error) {
+    console.warn(error);
+    return false;
+  }
+}
+
 export function isMotionDisabled(element: HTMLElement): boolean {
   return (
     !!findUpUntil(element, node => node.classList.contains('awsui-motion-disabled')) ||
-    (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false)
+    safeMatchMedia(element, '(prefers-reduced-motion: reduce)')
   );
 }