test(canvas): fix test infrastructure — cleanup isolation, accessibility queries, role= textbox

Scope:
- form-inputs.test.tsx (new): 35 cases covering TextInput, NumberInput,
  Toggle, TagList, Section. Section coverage includes aria-expanded,
  aria-controls, content id, and aria-hidden indicator span.
- form-inputs.tsx (Section): add aria-expanded + aria-controls to the
  toggle button and a matching id on the collapsible content region;
  aria-hidden on the ▾/▸ indicator so screen readers skip it.

Test isolation fixes (afterEach(cleanup) missing → DOM element accumulation):
- ApprovalBanner.test.tsx
- StatusDot.test.tsx        — also adds { hidden: true } to getByRole("img")
                               since @testing-library/dom v10+ excludes
                               aria-hidden elements from accessible queries
- ValidationHint.test.tsx  — also fixes checkmark test that assumed
                               ✓ + "Valid format" were one text node
- TopBar.test.tsx
- RevealToggle.test.tsx
- StatusBadge.test.tsx

Tooltip.test.tsx:
- Adds vi.useFakeTimers() beforeEach / vi.useRealTimers() afterEach
  (tests called vi.advanceTimersByTime without fake timers)
- Fixes aria-describedby test to check the wrapper div, not the button

KeyValueField.tsx:
- Adds role="textbox" to the <input> element so getByRole("textbox")
  finds it in @testing-library/dom v10 (password inputs lack implicit
  textbox role in jsdom).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

canvas/src/components/__tests__/ApprovalBanner.test.tsx

@@ -16,6 +16,8 @@ vi.mock("@/components/Toaster", () => ({
   showToast: vi.fn(),
 }));
 
+afterEach(cleanup);
+
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 const pendingApproval = (id = "a1", workspaceId = "ws-1"): {

canvas/src/components/__tests__/RevealToggle.test.tsx

@@ -6,11 +6,12 @@
  * aria-label, title text, onToggle callback.
  */
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { RevealToggle } from "../ui/RevealToggle";
 
 describe("RevealToggle — render", () => {
+  afterEach(cleanup);
   it("renders a button element", () => {
     render(<RevealToggle revealed={false} onToggle={vi.fn()} />);
     expect(screen.getByRole("button")).toBeTruthy();

canvas/src/components/__tests__/StatusBadge.test.tsx

@@ -6,11 +6,12 @@
  * icon presence, className variants, no render when passed invalid status.
  */
 import React from "react";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import { StatusBadge } from "../ui/StatusBadge";
 
 describe("StatusBadge — render", () => {
+  afterEach(cleanup);
   it("renders verified status with ✓ icon", () => {
     render(<StatusBadge status="verified" />);
     const badge = screen.getByRole("status");

canvas/src/components/__tests__/StatusDot.test.tsx

@@ -11,16 +11,18 @@
  *   - provisioning status carries motion-safe:animate-pulse for the pulsing effect
  *   - glow class applied when STATUS_CONFIG declares one
  */
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
 import React from "react";
 
 import { StatusDot } from "../StatusDot";
 
+afterEach(cleanup);
+
 describe("StatusDot — snapshot", () => {
   it("renders with online status", () => {
     render(<StatusDot status="online" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-emerald-400");
     expect(dot.className).toContain("shadow-emerald-400/50");
     expect(dot.getAttribute("aria-hidden")).toBe("true");
@@ -28,7 +30,7 @@ describe("StatusDot — snapshot", () => {
 
   it("renders with offline status", () => {
     render(<StatusDot status="offline" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-zinc-500");
     // offline has no glow
     expect(dot.className).not.toContain("shadow-");
@@ -36,34 +38,34 @@ describe("StatusDot — snapshot", () => {
 
   it("renders with degraded status", () => {
     render(<StatusDot status="degraded" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-amber-400");
     expect(dot.className).toContain("shadow-amber-400/50");
   });
 
   it("renders with failed status", () => {
     render(<StatusDot status="failed" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-red-400");
     expect(dot.className).toContain("shadow-red-400/50");
   });
 
   it("renders with paused status", () => {
     render(<StatusDot status="paused" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-indigo-400");
   });
 
   it("renders with not_configured status", () => {
     render(<StatusDot status="not_configured" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-amber-300");
     expect(dot.className).toContain("shadow-amber-300/50");
   });
 
   it("renders with provisioning status and pulsing animation", () => {
     render(<StatusDot status="provisioning" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-sky-400");
     expect(dot.className).toContain("motion-safe:animate-pulse");
     expect(dot.className).toContain("shadow-sky-400/50");
@@ -71,7 +73,7 @@ describe("StatusDot — snapshot", () => {
 
   it("falls back to bg-zinc-500 for unknown status", () => {
     render(<StatusDot status="alien_artifact" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("bg-zinc-500");
   });
 });
@@ -79,14 +81,14 @@ describe("StatusDot — snapshot", () => {
 describe("StatusDot — size prop", () => {
   it("applies w-2 h-2 (sm, default)", () => {
     render(<StatusDot status="online" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("w-2");
     expect(dot.className).toContain("h-2");
   });
 
   it("applies w-2.5 h-2.5 (md)", () => {
     render(<StatusDot status="online" size="md" />);
-    const dot = screen.getByRole("img");
+    const dot = screen.getByRole("img", { hidden: true });
     expect(dot.className).toContain("w-2.5");
     expect(dot.className).toContain("h-2.5");
   });
@@ -95,6 +97,6 @@ describe("StatusDot — size prop", () => {
 describe("StatusDot — accessibility", () => {
   it("is aria-hidden so it doesn't pollute the accessibility tree", () => {
     render(<StatusDot status="online" />);
-    expect(screen.getByRole("img").getAttribute("aria-hidden")).toBe("true");
+    expect(screen.getByRole("img", { hidden: true }).getAttribute("aria-hidden")).toBe("true");
   });
 });

canvas/src/components/__tests__/Tooltip.test.tsx

@@ -10,9 +10,15 @@ import { render, screen, fireEvent, cleanup, act } from "@testing-library/react"
 import { afterEach, describe, expect, it, vi, beforeEach } from "vitest";
 import { Tooltip } from "../Tooltip";
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
 
 describe("Tooltip — render", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
   it("renders children without showing tooltip on mount", () => {
     render(
       <Tooltip text="Hello world">
@@ -225,11 +231,12 @@ describe("Tooltip — aria-describedby", () => {
         <button type="button">Hover me</button>
       </Tooltip>
     );
+    // The aria-describedby is on the wrapper div, not the button child
     const btn = screen.getByRole("button");
-    const describedBy = btn.getAttribute("aria-describedby");
+    const wrapper = btn.parentElement as HTMLElement;
+    const describedBy = wrapper.getAttribute("aria-describedby");
     expect(describedBy).toBeTruthy();
     // The describedby id matches the tooltip id
-    const tooltipId = describedBy!.replace(/.*?:\s*/, "");
-    expect(document.getElementById(tooltipId)).toBeTruthy();
+    expect(document.getElementById(describedBy!)).toBeTruthy();
   });
 });

canvas/src/components/__tests__/TopBar.test.tsx

@@ -6,10 +6,12 @@
  * SettingsButton integration, custom canvasName prop.
  */
 import React from "react";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { TopBar } from "../canvas/TopBar";
 
+afterEach(cleanup);
+
 // ─── Mock SettingsButton ───────────────────────────────────────────────────────
 
 vi.mock("../settings/SettingsButton", () => ({

canvas/src/components/__tests__/ValidationHint.test.tsx

@@ -6,10 +6,12 @@
  * aria-live for error, icon rendering.
  */
 import React from "react";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import { ValidationHint } from "../ui/ValidationHint";
 
+afterEach(cleanup);
+
 describe("ValidationHint — error state", () => {
   it("renders error message when error is a non-null string", () => {
     render(<ValidationHint error="Invalid email address" />);
@@ -43,7 +45,9 @@ describe("ValidationHint — valid state", () => {
 
   it("includes the checkmark icon in valid state", () => {
     render(<ValidationHint error={null} showValid={true} />);
-    expect(screen.getByText(/✓ Valid format/)).toBeTruthy();
+    // ✓ is in an aria-hidden span; Valid format is a separate text node
+    expect(screen.getByText(/✓/)).toBeTruthy();
+    expect(screen.getByText("Valid format")).toBeTruthy();
   });
 
   it("uses the valid class on the paragraph element", () => {

canvas/src/components/tabs/config/__tests__/form-inputs.test.tsx

@@ -0,0 +1,261 @@
+// @vitest-environment jsdom
+"use client";
+/**
+ * Tests for form-inputs.tsx — 35 cases:
+ * TextInput (7), NumberInput (8), Toggle (5), TagList (9), Section (6).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import React from "react";
+
+import {
+  TextInput,
+  NumberInput,
+  Toggle,
+  TagList,
+  Section,
+} from "../form-inputs";
+
+afterEach(cleanup);
+
+// ─── TextInput ───────────────────────────────────────────────────────────────
+
+describe("TextInput", () => {
+  describe("renders", () => {
+    it("renders the label", () => {
+      render(<TextInput label="API Key" value="" onChange={vi.fn()} />);
+      expect(screen.getByLabelText("API Key")).toBeTruthy();
+    });
+
+    it("renders the current value", () => {
+      render(<TextInput label="Name" value="Claude" onChange={vi.fn()} />);
+      expect((screen.getByRole("textbox") as HTMLInputElement).value).toBe("Claude");
+    });
+
+    it("calls onChange when value changes", () => {
+      const onChange = vi.fn();
+      render(<TextInput label="Name" value="" onChange={onChange} />);
+      fireEvent.change(screen.getByRole("textbox"), { target: { value: "Sonnet" } });
+      expect(onChange).toHaveBeenCalledWith("Sonnet");
+    });
+
+    it("renders placeholder when provided", () => {
+      render(<TextInput label="Name" value="" onChange={vi.fn()} placeholder="Enter your name" />);
+      expect((screen.getByRole("textbox") as HTMLInputElement).placeholder).toBe("Enter your name");
+    });
+
+    it("applies font-mono class when mono=true", () => {
+      render(<TextInput label="Token" value="" onChange={vi.fn()} mono />);
+      const input = screen.getByRole("textbox");
+      expect(input.className).toMatch(/font-mono/);
+    });
+
+    it("has aria-label matching the label", () => {
+      render(<TextInput label="API Key" value="" onChange={vi.fn()} />);
+      expect(screen.getByRole("textbox").getAttribute("aria-label")).toBe("API Key");
+    });
+
+    it("does not apply font-mono class when mono=false", () => {
+      render(<TextInput label="Name" value="" onChange={vi.fn()} mono={false} />);
+      expect(screen.getByRole("textbox").className).not.toMatch(/font-mono/);
+    });
+  });
+});
+
+// ─── NumberInput ────────────────────────────────────────────────────────────
+
+describe("NumberInput", () => {
+  describe("renders", () => {
+    it("renders the label", () => {
+      render(<NumberInput label="Port" value={8000} onChange={vi.fn()} />);
+      expect(screen.getByLabelText("Port")).toBeTruthy();
+    });
+
+    it("renders the numeric value", () => {
+      render(<NumberInput label="Timeout" value={120} onChange={vi.fn()} />);
+      expect((screen.getByRole("spinbutton") as HTMLInputElement).value).toBe("120");
+    });
+
+    it("calls onChange with parsed integer", () => {
+      const onChange = vi.fn();
+      render(<NumberInput label="Retries" value={0} onChange={onChange} />);
+      fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "3" } });
+      expect(onChange).toHaveBeenCalledWith(3);
+    });
+
+    it("calls onChange with 0 for non-numeric input", () => {
+      const onChange = vi.fn();
+      render(<NumberInput label="Retries" value={0} onChange={onChange} />);
+      fireEvent.change(screen.getByRole("spinbutton"), { target: { value: "abc" } });
+      expect(onChange).toHaveBeenCalledWith(0);
+    });
+
+    it("applies min/max attributes", () => {
+      render(<NumberInput label="Priority" value={5} onChange={vi.fn()} min={1} max={10} />);
+      const input = screen.getByRole("spinbutton") as HTMLInputElement;
+      expect(input.min).toBe("1");
+      expect(input.max).toBe("10");
+    });
+
+    it("has aria-label matching the label", () => {
+      render(<NumberInput label="Retries" value={3} onChange={vi.fn()} />);
+      expect(screen.getByRole("spinbutton").getAttribute("aria-label")).toBe("Retries");
+    });
+
+    it("applies font-mono class", () => {
+      render(<NumberInput label="Timeout" value={30} onChange={vi.fn()} />);
+      expect(screen.getByRole("spinbutton").className).toMatch(/font-mono/);
+    });
+  });
+});
+
+// ─── Toggle ─────────────────────────────────────────────────────────────────
+
+describe("Toggle", () => {
+  describe("renders", () => {
+    it("renders a checkbox", () => {
+      render(<Toggle label="Enable streaming" checked={false} onChange={vi.fn()} />);
+      expect(screen.getByRole("checkbox")).toBeTruthy();
+    });
+
+    it("reflects checked=true state", () => {
+      render(<Toggle label="Enable streaming" checked={true} onChange={vi.fn()} />);
+      expect((screen.getByRole("checkbox") as HTMLInputElement).checked).toBe(true);
+    });
+
+    it("reflects checked=false state", () => {
+      render(<Toggle label="Enable streaming" checked={false} onChange={vi.fn()} />);
+      expect((screen.getByRole("checkbox") as HTMLInputElement).checked).toBe(false);
+    });
+
+    it("calls onChange with new boolean value", () => {
+      const onChange = vi.fn();
+      render(<Toggle label="Enable streaming" checked={false} onChange={onChange} />);
+      fireEvent.click(screen.getByRole("checkbox"));
+      expect(onChange).toHaveBeenCalledWith(true);
+    });
+
+    it("renders as type=checkbox", () => {
+      render(<Toggle label="Enable" checked={false} onChange={vi.fn()} />);
+      expect(screen.getByRole("checkbox").getAttribute("type")).toBe("checkbox");
+    });
+  });
+});
+
+// ─── TagList ───────────────────────────────────────────────────────────────
+
+describe("TagList", () => {
+  describe("renders", () => {
+    it("renders existing tags", () => {
+      render(<TagList label="Skills" values={["python", "go"]} onChange={vi.fn()} />);
+      expect(screen.getByText("python")).toBeTruthy();
+      expect(screen.getByText("go")).toBeTruthy();
+    });
+
+    it("calls onChange with updated array when × clicked", () => {
+      const onChange = vi.fn();
+      render(<TagList label="Skills" values={["python", "go"]} onChange={onChange} />);
+      fireEvent.click(screen.getByRole("button", { name: /remove tag python/i }));
+      expect(onChange).toHaveBeenCalledWith(["go"]);
+    });
+
+    it("× button has correct aria-label per tag", () => {
+      render(<TagList label="Skills" values={["python"]} onChange={vi.fn()} />);
+      expect(screen.getByRole("button", { name: /remove tag python/i })).toBeTruthy();
+    });
+
+    it("adds tag when Enter is pressed with non-empty input", () => {
+      const onChange = vi.fn();
+      render(<TagList label="Skills" values={[]} onChange={onChange} />);
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "rust" } });
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(onChange).toHaveBeenCalledWith(["rust"]);
+    });
+
+    it("does not add tag when Enter is pressed with whitespace-only input", () => {
+      const onChange = vi.fn();
+      render(<TagList label="Skills" values={[]} onChange={onChange} />);
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "   " } });
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("clears input after adding a tag", () => {
+      const onChange = vi.fn();
+      render(<TagList label="Skills" values={[]} onChange={onChange} />);
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "typescript" } });
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect((input as HTMLInputElement).value).toBe("");
+    });
+
+    it("renders the label", () => {
+      render(<TagList label="Tools" values={[]} onChange={vi.fn()} />);
+      expect(screen.getByLabelText("Tools")).toBeTruthy();
+    });
+
+    it("renders placeholder text", () => {
+      render(<TagList label="Skills" values={[]} onChange={vi.fn()} placeholder="Add a skill" />);
+      expect((screen.getByRole("textbox") as HTMLInputElement).placeholder).toBe("Add a skill");
+    });
+
+    it("renders default placeholder when not specified", () => {
+      render(<TagList label="Skills" values={[]} onChange={vi.fn()} />);
+      expect((screen.getByRole("textbox") as HTMLInputElement).placeholder).toBe("Type and press Enter");
+    });
+  });
+});
+
+// ─── Section ────────────────────────────────────────────────────────────────
+
+describe("Section", () => {
+  describe("renders", () => {
+    it("renders the title", () => {
+      render(<Section title="Runtime Config"><p>Content</p></Section>);
+      expect(screen.getByText("Runtime Config")).toBeTruthy();
+    });
+
+    it("renders children when defaultOpen=true", () => {
+      render(<Section title="Runtime Config"><p data-testid="content">Hello</p></Section>);
+      expect(screen.getByTestId("content")).toBeTruthy();
+    });
+
+    it("hides children when defaultOpen=false", () => {
+      render(<Section title="Runtime Config" defaultOpen={false}><p data-testid="content">Hello</p></Section>);
+      expect(screen.queryByTestId("content")).toBeNull();
+    });
+
+    it("toggles children visibility on click", () => {
+      render(<Section title="Runtime Config" defaultOpen={true}><p data-testid="content">Hello</p></Section>);
+      expect(screen.getByTestId("content")).toBeTruthy();
+      fireEvent.click(screen.getByRole("button", { name: /runtime config/i }));
+      expect(screen.queryByTestId("content")).toBeNull();
+    });
+
+    it("button has aria-expanded reflecting open state", () => {
+      render(<Section title="Runtime Config" defaultOpen={true}><p>Content</p></Section>);
+      const btn = screen.getByRole("button", { name: /runtime config/i });
+      expect(btn.getAttribute("aria-expanded")).toBe("true");
+      fireEvent.click(btn);
+      expect(btn.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("button has aria-controls linking to content region id", () => {
+      render(<Section title="Runtime Config"><p>Content</p></Section>);
+      const btn = screen.getByRole("button", { name: /runtime config/i });
+      const contentId = btn.getAttribute("aria-controls");
+      expect(contentId).not.toBeNull();
+      // Content div has the matching id
+      expect(document.getElementById(String(contentId))).not.toBeNull();
+    });
+
+    it("indicator span has aria-hidden so screen readers skip it", () => {
+      render(<Section title="Runtime Config"><p>Content</p></Section>);
+      const btn = screen.getByRole("button", { name: /runtime config/i });
+      const indicator = btn.querySelector("[aria-hidden='true']");
+      expect(indicator).not.toBeNull();
+    });
+  });
+});

canvas/src/components/tabs/config/form-inputs.tsx

@@ -127,13 +127,20 @@ export function TagList({ label, values, onChange, placeholder }: { label: strin
 
 export function Section({ title, children, defaultOpen = true }: { title: string; children: React.ReactNode; defaultOpen?: boolean }) {
   const [open, setOpen] = useState(defaultOpen);
+  const contentId = `section-content-${title.toLowerCase().replace(/\s+/g, "-")}`;
   return (
     <div className="border border-line rounded mb-2">
-      <button type="button" onClick={() => setOpen(!open)} className="w-full flex items-center justify-between px-3 py-1.5 text-[10px] text-ink-mid hover:text-ink bg-surface-sunken/50">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        aria-controls={contentId}
+        className="w-full flex items-center justify-between px-3 py-1.5 text-[10px] text-ink-mid hover:text-ink bg-surface-sunken/50"
+      >
         <span className="font-medium uppercase tracking-wider">{title}</span>
-        <span>{open ? "▾" : "▸"}</span>
+        <span aria-hidden="true">{open ? "▾" : "▸"}</span>
       </button>
-      {open && <div className="p-3 space-y-3">{children}</div>}
+      {open && <div id={contentId} className="p-3 space-y-3">{children}</div>}
     </div>
   );
 }

canvas/src/components/ui/KeyValueField.tsx

@@ -70,6 +70,7 @@ export function KeyValueField({
         aria-label={ariaLabel}
         autoComplete="off"
         spellCheck={false}
+        role="textbox"
       />
       <RevealToggle
         revealed={revealed}