fix(canvas tests): add cleanup hooks and fix jsdom accessibility queries

- Add afterEach(cleanup) to 8 test files that were missing it:
  ApprovalBanner, TopBar, BundleDropZone, RevealToggle, StatusBadge,
  ValidationHint, Legend, StatusDot.
- Fix StatusDot: replace screen.getByRole for aria-hidden elements
  (jsdom excludes aria-hidden from accessibility tree) with
  container.querySelector('[role="img"]').
- Fix KeyValueField: replace screen.getByRole("textbox") with
  getByLabelText — jsdom does not expose type="password" as accessible
  textbox role.
- Fix BundleDropZone: add getFileInput() helper; replace getByLabelText
  (which matched both file input AND button sharing the same aria-label)
  with container.querySelector for the file input.
- Fix Tooltip render block: add beforeEach(useFakeTimers) so tests using
  vi.advanceTimersByTime run correctly.

These fixes address DOM pollution between tests (missing cleanup hooks)
and jsdom accessibility tree limitations for aria-hidden and non-textbox
role elements — pre-existing issues discovered while verifying the
full canvas test suite after the workspace test suite passed.

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

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

@@ -12,6 +12,8 @@ import { ApprovalBanner } from "../ApprovalBanner";
 import { showToast } from "@/components/Toaster";
 import { api } from "@/lib/api";
 
+afterEach(cleanup);
+
 vi.mock("@/components/Toaster", () => ({
   showToast: vi.fn(),
 }));

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

@@ -11,6 +11,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { BundleDropZone } from "../BundleDropZone";
 import { api } from "@/lib/api";
 
+afterEach(cleanup);
+
 vi.mock("@/lib/api", () => ({
   api: {
     post: vi.fn(),
@@ -37,12 +39,24 @@ function makeBundle(name = "test-workspace"): File {
   });
 }
 
+/** Get the file input from a render result's container.
+ *
+ * NOTE: Both the hidden <input type="file"> and the visible <button> share
+ * aria-label="Import bundle file", so getByLabelText finds multiple elements.
+ * Use this helper instead to scope the query to the file input in the container.
+ */
+function getFileInput(r: ReturnType<typeof render>): HTMLInputElement {
+  const input = r.container.querySelector<HTMLInputElement>('input[type="file"]');
+  if (!input) throw new Error("No file input found");
+  return input;
+}
+
 // ─── Tests ────────────────────────────────────────────────────────────────────
 
 describe("BundleDropZone — render", () => {
   it("renders a hidden file input with correct accept and aria-label", () => {
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
     expect(input.getAttribute("type")).toBe("file");
     expect(input.getAttribute("accept")).toBe(".bundle.json");
   });
@@ -91,8 +105,8 @@ describe("BundleDropZone — drag state", () => {
 
 describe("BundleDropZone — keyboard file input (WCAG 2.1.1)", () => {
   it("triggers the hidden file input when the import button is clicked", () => {
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file") as HTMLInputElement;
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
     const clickSpy = vi.spyOn(input, "click");
     fireEvent.click(screen.getByRole("button", { name: /import bundle/i }));
     expect(clickSpy).toHaveBeenCalled();
@@ -106,8 +120,8 @@ describe("BundleDropZone — keyboard file input (WCAG 2.1.1)", () => {
       status: "online",
     });
 
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = makeBundle("My Bundle");
     Object.defineProperty(input, "files", {
@@ -138,8 +152,8 @@ describe("BundleDropZone — import success", () => {
       status: "online",
     });
 
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = makeBundle("Success Workspace");
     Object.defineProperty(input, "files", { value: [file], writable: false });
@@ -169,8 +183,8 @@ describe("BundleDropZone — import success", () => {
       status: "online",
     });
 
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = makeBundle("Timed Workspace");
     Object.defineProperty(input, "files", { value: [file], writable: false });
@@ -195,8 +209,8 @@ describe("BundleDropZone — import error", () => {
     vi.useFakeTimers();
     vi.mocked(api.post).mockRejectedValueOnce(new Error("Import failed: 500 Internal Server Error"));
 
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = makeBundle("Failed Workspace");
     Object.defineProperty(input, "files", { value: [file], writable: false });
@@ -213,8 +227,8 @@ describe("BundleDropZone — import error", () => {
 
   it("shows error when file is not a .bundle.json", async () => {
     vi.useFakeTimers();
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = new File(["{}"], "readme.txt", { type: "text/plain" });
     Object.defineProperty(input, "files", { value: [file], writable: false });
@@ -238,8 +252,8 @@ describe("BundleDropZone — import error", () => {
     vi.useFakeTimers();
     vi.mocked(api.post).mockRejectedValueOnce(new Error("Network error"));
 
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = makeBundle("Error Workspace");
     Object.defineProperty(input, "files", { value: [file], writable: false });
@@ -266,8 +280,8 @@ describe("BundleDropZone — importing state", () => {
     const pending = new Promise((r) => { resolve = r; });
     vi.mocked(api.post).mockReturnValueOnce(pending as unknown as ReturnType<typeof api.post>);
 
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file");
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = makeBundle("Pending Workspace");
     Object.defineProperty(input, "files", { value: [file], writable: false });
@@ -298,8 +312,8 @@ describe("BundleDropZone — file input reset", () => {
       status: "online",
     });
 
-    render(<BundleDropZone />);
-    const input = screen.getByLabelText("Import bundle file") as HTMLInputElement;
+    const r = render(<BundleDropZone />);
+    const input = getFileInput(r);
 
     const file = makeBundle("Reset Test");
     Object.defineProperty(input, "files", { value: [file], writable: false });

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

@@ -5,6 +5,11 @@
  * Covers: renders password input, type=text when revealed,
  * onChange prop, auto-trim on paste, auto-hide after 30s,
  * disabled state, aria-label.
+ *
+ * NOTE: getByRole("textbox") is replaced with getByLabelText because
+ * jsdom's accessibility tree does not expose type="password" inputs as
+ * accessible textbox role — querySelector is used as a fallback where
+ * aria-label is not available.
  */
 import React from "react";
 import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
@@ -22,12 +27,12 @@ describe("KeyValueField — render", () => {
 
   it("renders a password input by default", () => {
     render(<KeyValueField value="" onChange={vi.fn()} />);
-    expect(screen.getByRole("textbox").getAttribute("type")).toBe("password");
+    expect(screen.getByLabelText("Secret value").getAttribute("type")).toBe("password");
   });
 
   it("renders a text input when revealed=true", () => {
     const { container } = render(<KeyValueField value="secret" onChange={vi.fn()} />);
-    // Cannot use getByRole because type=text inputs may not be queryable as textbox in jsdom
+    // Use querySelector since we don't change the aria-label
     const input = container.querySelector("input");
     expect(input).toBeTruthy();
     expect(input!.getAttribute("type")).toBe("password");
@@ -35,32 +40,32 @@ describe("KeyValueField — render", () => {
 
   it("uses the provided aria-label", () => {
     render(<KeyValueField value="" onChange={vi.fn()} aria-label="My secret field" />);
-    expect(screen.getByRole("textbox").getAttribute("aria-label")).toBe("My secret field");
+    expect(screen.getByLabelText("My secret field").getAttribute("aria-label")).toBe("My secret field");
   });
 
   it("uses default aria-label when omitted", () => {
     render(<KeyValueField value="" onChange={vi.fn()} />);
-    expect(screen.getByRole("textbox").getAttribute("aria-label")).toBe("Secret value");
+    expect(screen.getByLabelText("Secret value").getAttribute("aria-label")).toBe("Secret value");
   });
 
   it("renders a disabled input when disabled=true", () => {
     render(<KeyValueField value="x" onChange={vi.fn()} disabled={true} />);
-    expect(screen.getByRole("textbox").getAttribute("disabled")).toBe("");
+    expect(screen.getByLabelText("Secret value").getAttribute("disabled")).toBe("");
   });
 
   it("renders with the provided placeholder", () => {
     render(<KeyValueField value="" onChange={vi.fn()} placeholder="Enter API key" />);
-    expect(screen.getByRole("textbox").getAttribute("placeholder")).toBe("Enter API key");
+    expect(screen.getByLabelText("Secret value").getAttribute("placeholder")).toBe("Enter API key");
   });
 
   it("disables spell-check on the input", () => {
     render(<KeyValueField value="" onChange={vi.fn()} />);
-    expect(screen.getByRole("textbox").getAttribute("spellcheck")).toBe("false");
+    expect(screen.getByLabelText("Secret value").getAttribute("spellcheck")).toBe("false");
   });
 
   it("sets autoComplete=off on the input", () => {
     render(<KeyValueField value="" onChange={vi.fn()} />);
-    expect(screen.getByRole("textbox").getAttribute("autocomplete")).toBe("off");
+    expect(screen.getByLabelText("Secret value").getAttribute("autocomplete")).toBe("off");
   });
 });
 
@@ -74,28 +79,28 @@ describe("KeyValueField — onChange", () => {
   it("calls onChange when input changes", () => {
     const onChange = vi.fn();
     render(<KeyValueField value="" onChange={onChange} />);
-    fireEvent.change(screen.getByRole("textbox"), { target: { value: "abc" } });
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "abc" } });
     expect(onChange).toHaveBeenCalledWith("abc");
   });
 
   it("trims trailing whitespace on change", () => {
     const onChange = vi.fn();
     render(<KeyValueField value="" onChange={onChange} />);
-    fireEvent.change(screen.getByRole("textbox"), { target: { value: "abc  " } });
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "abc  " } });
     expect(onChange).toHaveBeenCalledWith("abc");
   });
 
   it("trims leading whitespace on change", () => {
     const onChange = vi.fn();
     render(<KeyValueField value="" onChange={onChange} />);
-    fireEvent.change(screen.getByRole("textbox"), { target: { value: "  abc" } });
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "  abc" } });
     expect(onChange).toHaveBeenCalledWith("abc");
   });
 
   it("passes value through unchanged when no whitespace trimming needed", () => {
     const onChange = vi.fn();
     render(<KeyValueField value="" onChange={onChange} />);
-    fireEvent.change(screen.getByRole("textbox"), { target: { value: "no-change" } });
+    fireEvent.change(screen.getByLabelText("Secret value"), { target: { value: "no-change" } });
     expect(onChange).toHaveBeenCalledWith("no-change");
   });
 });

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

@@ -11,6 +11,8 @@ import { afterEach, describe, expect, it, vi, beforeEach } from "vitest";
 import { Legend } from "../Legend";
 import { useCanvasStore } from "@/store/canvas";
 
+afterEach(cleanup);
+
 // ─── Mock localStorage ────────────────────────────────────────────────────────
 
 const localStorageMock = (() => {

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

@@ -6,10 +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";
 
+afterEach(cleanup);
+
 describe("RevealToggle — render", () => {
   it("renders a button element", () => {
     render(<RevealToggle revealed={false} onToggle={vi.fn()} />);

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

@@ -6,10 +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";
 
+afterEach(cleanup);
+
 describe("StatusBadge — render", () => {
   it("renders verified status with ✓ icon", () => {
     render(<StatusBadge status="verified" />);

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

@@ -10,83 +10,94 @@
  *   - aria-hidden="true" and role="img" for accessibility
  *   - provisioning status carries motion-safe:animate-pulse for the pulsing effect
  *   - glow class applied when STATUS_CONFIG declares one
+ *
+ * NOTE: aria-hidden elements are excluded from jsdom's accessibility tree, so
+ * getByRole("img") cannot find them. Use container.querySelector instead.
  */
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/react";
 import React from "react";
 
 import { StatusDot } from "../StatusDot";
 
+afterEach(cleanup);
+
+function getStatusDot(container: HTMLElement) {
+  const el = container.querySelector<HTMLElement>('[role="img"]');
+  if (!el) throw new Error("No role=img element found");
+  return el;
+}
+
 describe("StatusDot — snapshot", () => {
   it("renders with online status", () => {
-    render(<StatusDot status="online" />);
-    const dot = screen.getByRole("img");
+    const { container } = render(<StatusDot status="online" />);
+    const dot = getStatusDot(container);
     expect(dot.className).toContain("bg-emerald-400");
     expect(dot.className).toContain("shadow-emerald-400/50");
     expect(dot.getAttribute("aria-hidden")).toBe("true");
   });
 
   it("renders with offline status", () => {
-    render(<StatusDot status="offline" />);
-    const dot = screen.getByRole("img");
+    const { container } = render(<StatusDot status="offline" />);
+    const dot = getStatusDot(container);
     expect(dot.className).toContain("bg-zinc-500");
     // offline has no glow
     expect(dot.className).not.toContain("shadow-");
   });
 
   it("renders with degraded status", () => {
-    render(<StatusDot status="degraded" />);
-    const dot = screen.getByRole("img");
+    const { container } = render(<StatusDot status="degraded" />);
+    const dot = getStatusDot(container);
     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 { container } = render(<StatusDot status="failed" />);
+    const dot = getStatusDot(container);
     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 { container } = render(<StatusDot status="paused" />);
+    const dot = getStatusDot(container);
     expect(dot.className).toContain("bg-indigo-400");
   });
 
   it("renders with not_configured status", () => {
-    render(<StatusDot status="not_configured" />);
-    const dot = screen.getByRole("img");
+    const { container } = render(<StatusDot status="not_configured" />);
+    const dot = getStatusDot(container);
     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 { container } = render(<StatusDot status="provisioning" />);
+    const dot = getStatusDot(container);
     expect(dot.className).toContain("bg-sky-400");
     expect(dot.className).toContain("motion-safe:animate-pulse");
     expect(dot.className).toContain("shadow-sky-400/50");
   });
 
   it("falls back to bg-zinc-500 for unknown status", () => {
-    render(<StatusDot status="alien_artifact" />);
-    const dot = screen.getByRole("img");
+    const { container } = render(<StatusDot status="alien_artifact" />);
+    const dot = getStatusDot(container);
     expect(dot.className).toContain("bg-zinc-500");
   });
 });
 
 describe("StatusDot — size prop", () => {
   it("applies w-2 h-2 (sm, default)", () => {
-    render(<StatusDot status="online" />);
-    const dot = screen.getByRole("img");
+    const { container } = render(<StatusDot status="online" />);
+    const dot = getStatusDot(container);
     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 { container } = render(<StatusDot status="online" size="md" />);
+    const dot = getStatusDot(container);
     expect(dot.className).toContain("w-2.5");
     expect(dot.className).toContain("h-2.5");
   });
@@ -94,7 +105,7 @@ 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");
+    const { container } = render(<StatusDot status="online" />);
+    expect(getStatusDot(container).getAttribute("aria-hidden")).toBe("true");
   });
 });

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

@@ -13,6 +13,9 @@ import { Tooltip } from "../Tooltip";
 afterEach(cleanup);
 
 describe("Tooltip — render", () => {
+  beforeEach(() => { vi.useFakeTimers(); });
+  afterEach(() => { vi.useRealTimers(); });
+
   it("renders children without showing tooltip on mount", () => {
     render(
       <Tooltip text="Hello world">

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" />);