diff --git a/web/src/pages/replay.test.ts b/web/src/pages/replay.test.ts
index 4592d04..46f5f7f 100644
--- a/web/src/pages/replay.test.ts
+++ b/web/src/pages/replay.test.ts
@@ -12,6 +12,21 @@ declare global {
 
 describe('replay.ts error handling (URL load button)', () => {
   beforeEach(() => {
+    // Ensure matchMedia is mocked before any module loads
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+
     // Setup DOM environment
     document.body.innerHTML = '<div id="app"></div>';
     globalThis.fetch = vi.fn();
diff --git a/web/src/test-setup.ts b/web/src/test-setup.ts
index f0dfddb..36ac775 100644
--- a/web/src/test-setup.ts
+++ b/web/src/test-setup.ts
@@ -1,17 +1,21 @@
 /**
  * Vitest setup file for browser API mocks.
  */
+import { vi } from 'vitest';
 
+// Mock matchMedia for accessibility features in replay.ts
+// Must be set up before tests import modules that use it
+const matchMediaMock = vi.fn().mockImplementation((query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}));
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: vi.fn().mockImplementation((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
+  value: matchMediaMock,
 });