visual upgrade

tests/components.test.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import axe from "axe-core";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  AppShell,
+  Button,
+  FormField,
+  Input,
+  ThemeProvider,
+  useTheme,
+} from "../src";
+
+function ThemeControl() {
+  const { resolvedTheme, toggleTheme } = useTheme();
+  return <Button onClick={toggleTheme}>Current: {resolvedTheme}</Button>;
+}
+
+describe("core UI contracts", () => {
+  it("persists and applies theme changes", () => {
+    render(<ThemeProvider defaultTheme="dark"><ThemeControl /></ThemeProvider>);
+    fireEvent.click(screen.getByRole("button", { name: "Current: dark" }));
+    expect(document.documentElement).toHaveClass("light");
+    expect(window.localStorage.getItem("jason-ui-theme")).toBe("light");
+  });
+
+  it("associates form help and errors with the control", () => {
+    render(
+      <FormField label="Workspace name" description="Used in navigation" error="Name is required">
+        <Input />
+      </FormField>
+    );
+    const input = screen.getByLabelText("Workspace name");
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input.getAttribute("aria-describedby")).toContain("-error");
+  });
+
+  it("provides mobile navigation and current-page semantics", () => {
+    const onClick = vi.fn();
+    render(
+      <AppShell
+        brand="Acme"
+        nav={[{ label: "Dashboard", active: true, onClick }]}
+      >
+        Content
+      </AppShell>
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Open navigation" }));
+    const current = screen.getAllByRole("button", { name: "Dashboard" }).at(-1)!;
+    expect(current).toHaveAttribute("aria-current", "page");
+    fireEvent.click(current);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("has no serious accessibility violations in representative primitives", async () => {
+    const { container } = render(
+      <main>
+        <FormField label="Email" description="We never share it."><Input type="email" /></FormField>
+        <Button>Save</Button>
+      </main>
+    );
+    const results = await axe.run(container, { runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] } });
+    expect(results.violations.filter((violation) => violation.impact === "serious" || violation.impact === "critical")).toEqual([]);
+  });
+});