wcag and responsiveness

site/tests/wcag-responsive-shell.test.ts

@@ -0,0 +1,37 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+
+import { describe, expect, it } from "vitest";
+
+async function read(rel: string) {
+  return await readFile(path.join(process.cwd(), rel), "utf8");
+}
+
+describe("wcag + responsive shell", () => {
+  it("adds skip link and main content anchor", async () => {
+    const src = await read("src/layouts/BaseLayout.astro");
+    expect(src).toContain('class="skip-link"');
+    expect(src).toContain('href="#main-content"');
+    expect(src).toContain('id="main-content"');
+  });
+
+  it("adds a hamburger toggle with ARIA and a script that updates aria-expanded", async () => {
+    const src = await read("src/layouts/BaseLayout.astro");
+    expect(src).toContain('class="nav-toggle"');
+    expect(src).toContain('aria-controls="primary-nav"');
+    expect(src).toContain('aria-expanded="false"');
+    expect(src).toContain('id="primary-nav"');
+    expect(src).toContain("toggle.setAttribute(\"aria-expanded\"");
+    expect(src).toContain("e.key !== \"Escape\"");
+  });
+
+  it("defines baseline focus-visible, reduced-motion, and oversized background layer", async () => {
+    const css = await read("public/styles/global.css");
+    expect(css).toContain("a:focus-visible");
+    expect(css).toContain("@media (prefers-reduced-motion: reduce)");
+    expect(css).toContain("body::before");
+    expect(css).toContain("@media (max-width: 760px)");
+    expect(css).toContain(".nav[data-open=\"true\"]");
+  });
+});
+