diff --git a/src/internal/visual-mode/__tests__/motion.test.tsx b/src/internal/visual-mode/__tests__/motion.test.tsx
index fa447e6..5d87931 100644
--- a/src/internal/visual-mode/__tests__/motion.test.tsx
+++ b/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(
+
+ );
+ const element = renderResult.container.querySelector('#test-element') as HTMLElement;
+
+ expect(isMotionDisabled(element)).toEqual(false);
+
+ expect(warnSpy).toHaveBeenCalled();
+ });
});
diff --git a/src/internal/visual-mode/index.ts b/src/internal/visual-mode/index.ts
index 6db25bb..c7c278b 100644
--- a/src/internal/visual-mode/index.ts
+++ b/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)')
);
}