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( +
+
Content
+
+ ); + 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)') ); }