test(web): scaffold a11y test file with jsdom environment and module mocks (ATB-34)

apps/web/src/__tests__/a11y.test.ts

···
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import axe from "axe-core";
+
+// ── Module mocks ──────────────────────────────────────────────────────────────
+// Must be declared before any imports that use these modules.
+// vi.mock is hoisted to the top of the file by Vitest's transform.
+
+vi.mock("../lib/api.js", () => ({
+  fetchApi: vi.fn(),
+}));
+
+vi.mock("../lib/session.js", () => ({
+  getSession: vi.fn(),
+  getSessionWithPermissions: vi.fn(),
+  canLockTopics: vi.fn().mockReturnValue(false),
+  canModeratePosts: vi.fn().mockReturnValue(false),
+  canBanUsers: vi.fn().mockReturnValue(false),
+}));
+
+vi.mock("../lib/logger.js", () => ({
+  logger: {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    fatal: vi.fn(),
+  },
+}));
+
+// ── Import mocked modules so we can configure return values per test ──────────
+import { fetchApi } from "../lib/api.js";
+import { getSession, getSessionWithPermissions } from "../lib/session.js";
+
+// ── Route factories ───────────────────────────────────────────────────────────
+// eslint-disable-next-line no-unused-vars
+import { createHomeRoutes } from "../routes/home.js";
+// eslint-disable-next-line no-unused-vars
+import { createLoginRoutes } from "../routes/login.js";
+// eslint-disable-next-line no-unused-vars
+import { createBoardsRoutes } from "../routes/boards.js";
+// eslint-disable-next-line no-unused-vars
+import { createTopicsRoutes } from "../routes/topics.js";
+// eslint-disable-next-line no-unused-vars
+import { createNewTopicRoutes } from "../routes/new-topic.js";
+// eslint-disable-next-line no-unused-vars
+import { createNotFoundRoute } from "../routes/not-found.js";
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+// eslint-disable-next-line no-unused-vars
+const APPVIEW_URL = "http://localhost:3000";
+
+// ── Typed mock handles ────────────────────────────────────────────────────────
+const mockFetchApi = vi.mocked(fetchApi);
+const mockGetSession = vi.mocked(getSession);
+const mockGetSessionWithPermissions = vi.mocked(getSessionWithPermissions);
+
+// ── Shared reset ──────────────────────────────────────────────────────────────
+beforeEach(() => {
+  mockFetchApi.mockReset();
+  // Default: unauthenticated session for all routes.
+  // Override in individual tests that need authenticated state.
+  mockGetSession.mockResolvedValue({ authenticated: false });
+  mockGetSessionWithPermissions.mockResolvedValue({
+    authenticated: false,
+    permissions: new Set<string>(),
+  });
+});
+
+// ── A11y helper ───────────────────────────────────────────────────────────────
+// NOTE: jsdom has no CSS engine, so axe-core's color-contrast rules are
+// skipped automatically. These tests cover structural/semantic WCAG AA rules
+// only (landmark regions, heading hierarchy, form labels, aria attributes).
+// eslint-disable-next-line no-unused-vars
+async function checkA11y(html: string): Promise<void> {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const results = await axe.run(doc, {
+    runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] },
+  });
+  const summary = results.violations
+    .map(
+      (v) =>
+        `  [${v.id}] ${v.description}\n` +
+        v.nodes.map((n) => `    → ${n.html}`).join("\n")
+    )
+    .join("\n");
+  expect(
+    results.violations,
+    `WCAG AA violations found:\n${summary}`
+  ).toHaveLength(0);
+}
+
+describe("WCAG AA accessibility — one happy-path test per page route", () => {
+  // Tests added in subsequent tasks
+  it.todo("home page / has no violations");
+  it.todo("login page /login has no violations");
+  it.todo("board page /boards/:id has no violations");
+  it.todo("topic page /topics/:id has no violations");
+  it.todo("new-topic page /new-topic (authenticated) has no violations");
+  it.todo("not-found page has no violations");
+});