fix: repair frontend dev-mode client/server boundaries and axe-core crash

- Add missing "use client" to OfflineBanner and MarketDetailView, which
  call client-only hooks directly; without it, dev mode throws
  "Attempted to call X() from the server but X is on the client."
  (next build didn't catch this since prerendering takes a different path)
- Give @axe-core/react a mutable shallow copy of the React module instead
  of the frozen ES module namespace object Turbopack hands client bundles,
  so its createElement monkey-patch no longer throws
  "Cannot set property createElement ... which has only a getter"
- Update/add reportAccessibility tests to cover the copy behavior and the
  new graceful-failure path

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VwH69MWtWXdEwaBWyxEiNb

Author: hman38705

frontend/src/components/OfflineBanner.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { useOnlineStatus } from '../lib/hooks/useOnlineStatus';
 import './OfflineBanner.css';

frontend/src/components/markets/MarketDetailView.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { useAsync } from '../../lib/hooks/useAsync';
 import { api, ApiError, isMarketNotResolvedError } from '../../lib/api/public-client';

frontend/src/lib/__tests__/reportAccessibility.test.ts

@@ -33,12 +33,30 @@ describe('reportAccessibility', () => {
 
     expect(axeDefault).toHaveBeenCalledTimes(1);
     const [reactArg, domArg, timeout, cfg] = axeDefault.mock.calls[0];
-    expect(reactArg).toBe(fakeReact);
+    // A shallow copy, not the same reference — axe patches `createElement` in
+    // place, and Turbopack's client bundle hands us a frozen module namespace
+    // object for `react`, so the harness must pass a mutable copy instead.
+    expect(reactArg).not.toBe(fakeReact);
+    expect(reactArg).toEqual(fakeReact);
     expect(domArg.__isMockDOM).toBe(true);
     expect(timeout).toBe(1000);
     expect(cfg).toEqual(config);
   });
 
+  it('does not throw when @axe-core/react fails to patch React', async () => {
+    const { reportAccessibility, axeDefault } = load();
+    jest.replaceProperty(process.env, 'NODE_ENV', 'development');
+    axeDefault.mockImplementation(() => {
+      throw new TypeError('Cannot set property createElement of [object Module] which has only a getter');
+    });
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    await expect(reportAccessibility(fakeReact)).resolves.toBeUndefined();
+
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
   it('only initializes once even when called multiple times', async () => {
     const { reportAccessibility, axeDefault } = load();
     jest.replaceProperty(process.env, 'NODE_ENV', 'development');

frontend/src/lib/reportAccessibility.ts

@@ -37,7 +37,17 @@ export async function reportAccessibility(
   const axe = await import('@axe-core/react');
   const ReactDOM = await import('react-dom');
 
+  // @axe-core/react monkey-patches `React.createElement` in place. Turbopack's
+  // client bundle hands us a frozen ES module namespace object for `react`, so
+  // assigning to it directly throws ("... has only a getter"). Give axe a
+  // mutable shallow copy instead — it only ever writes to `createElement`.
+  const patchableReact = { ...ReactModule };
+
   // (ReactModule, ReactDOM, timeoutMs, config) — timeout is how long axe waits
   // after a render before scanning, to avoid throttling during bursty updates.
-  axe.default(ReactModule, ReactDOM, 1000, config);
+  try {
+    axe.default(patchableReact, ReactDOM, 1000, config);
+  } catch (err) {
+    console.warn('[a11y] failed to initialize @axe-core/react', err);
+  }
 }