@stigmer/react 3.1.2 → 3.1.3

package/src/workspace/__tests__/WorkspaceEditor-initialPanel.test.tsx

@@ -146,6 +146,25 @@ describe("WorkspaceEditor initialPanel", () => {
     expect(screen.getByText("new-repo")).toBeTruthy();
   });
 
+  it("labels the manual git inputs for assistive tech (no OAuth connection)", () => {
+    // With no gitHubConnection, the panel falls back to manual URL/branch entry.
+    render(
+      <WorkspaceEditor
+        workspace={createMockWorkspace()}
+        enableGitHub
+        enableLocal={false}
+        initialPanel="github"
+      />,
+    );
+    // Accessible names come from aria-label, not the disappearing placeholder.
+    expect(
+      screen.getByRole("textbox", { name: "Git repository URL" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("textbox", { name: "Branch (optional)" }),
+    ).toBeTruthy();
+  });
+
   it("shows loading state when GitHub is checking connection with initialPanel='github'", () => {
     const connection = createMockGitHubConnection({ isLoading: true });
 

package/src/workspace/__tests__/WorkspaceFileSearch.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, fireEvent, cleanup, within } from "@testing-library/react";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import { WorkspaceFileSearch } from "../WorkspaceFileSearch";
 import { __clearWorkspaceListingCache } from "../workspaceListingCache";
 import type { WorkspaceEntry } from "../useWorkspaceEntries";
@@ -74,7 +74,7 @@ describe("WorkspaceFileSearch", () => {
 
     typeQuery("button");
     const option = await screen.findByRole("option");
-    fireEvent.click(within(option).getByRole("button"));
+    fireEvent.click(option);
 
     expect(onOpenFile).toHaveBeenCalledWith(entry.id, "src/button.tsx");
     // Single entry → no group header.
@@ -126,9 +126,7 @@ describe("WorkspaceFileSearch", () => {
     );
     typeQuery("button");
     const option = await screen.findByRole("option");
-    expect(within(option).getByRole("button").getAttribute("aria-current")).toBe(
-      "true",
-    );
+    expect(option.getAttribute("aria-current")).toBe("true");
   });
 
   it("shows a no-match state", async () => {
@@ -140,7 +138,10 @@ describe("WorkspaceFileSearch", () => {
       />,
     );
     typeQuery("zzzzz");
-    expect(await screen.findByText(/no files matching/i)).toBeTruthy();
+    // Assert the visible message, not the parallel sr-only live-region copy.
+    expect(
+      await screen.findByText(/no files matching/i, { ignore: ".sr-only" }),
+    ).toBeTruthy();
   });
 
   it("renders a truncation notice from a notice entry", async () => {
@@ -184,6 +185,26 @@ describe("WorkspaceFileSearch", () => {
     expect(onOpenFile.mock.calls[0][0]).toBe(entry.id);
   });
 
+  it("announces result status in a polite live region", async () => {
+    render(
+      <WorkspaceFileSearch
+        entries={[makeEntry()]}
+        lister={vi.fn(async () => FILES)}
+        onOpenFile={vi.fn()}
+      />,
+    );
+    const status = screen.getByRole("status");
+    expect(status.getAttribute("aria-live")).toBe("polite");
+
+    typeQuery("button");
+    await screen.findByRole("option");
+    expect(status.textContent).toMatch(/matching file/i);
+
+    typeQuery("zzzzz");
+    await screen.findByText(/no files matching/i, { ignore: ".sr-only" });
+    expect(status.textContent).toMatch(/no files matching/i);
+  });
+
   it("caps rendered results and reports the total", async () => {
     const entry = makeEntry();
     const many: WorkspaceFileEntry[] = Array.from({ length: 250 }, (_, i) => ({

package/src/workspace/__tests__/WorkspaceSurface.test.tsx

@@ -152,6 +152,23 @@ describe("WorkspaceSurface", () => {
     expect(tab.getAttribute("aria-selected")).toBe("true");
   });
 
+  it("associates the active tab with the single editor tabpanel", () => {
+    renderSurface();
+    const tab = screen.getByRole("tab", { name: /main\.go/ });
+    const panel = screen.getByRole("tabpanel");
+    const panelId = panel.getAttribute("id");
+    expect(panelId).toBeTruthy();
+    expect(tab.getAttribute("id")).toBeTruthy();
+    // Tab -> panel and panel -> active tab, both directions wired.
+    expect(tab.getAttribute("aria-controls")).toBe(panelId);
+    expect(panel.getAttribute("aria-labelledby")).toBe(tab.getAttribute("id"));
+  });
+
+  it("renders no tabpanel when no editor is open (nothing to label)", () => {
+    renderSurface({ selectedFile: null, editors: [] });
+    expect(screen.queryByRole("tabpanel")).toBeNull();
+  });
+
   it("collapses back to chat when the toolbar control is clicked", () => {
     const { onCollapse } = renderSurface();
     fireEvent.click(screen.getByRole("button", { name: "Back to chat" }));
@@ -242,6 +259,59 @@ describe("WorkspaceSurface extraViews", () => {
     fireEvent.keyDown(search, { key: "ArrowDown" });
     expect(screen.getByTestId("config-probe")).toBeTruthy();
   });
+
+  it("reaches an injected view beyond the second by keyboard (focus follows selection)", () => {
+    // Regression guard: the old handler moved selection but never DOM focus, so
+    // focus stayed pinned on the entered button and every view past the second
+    // (Config, Changes, …) was keyboard-unreachable. Each arrow must advance
+    // focus so the next arrow computes from the new position.
+    renderSurface({ extraViews: [configView, changesView] });
+    const explorer = screen.getByRole("radio", { name: "Explorer" });
+    explorer.focus();
+    expect(document.activeElement).toBe(explorer);
+
+    // Step 1: Explorer -> Search, focus moves with the selection.
+    fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+    const search = screen.getByRole("radio", { name: "Search" });
+    expect(document.activeElement).toBe(search);
+    expect(search.getAttribute("aria-checked")).toBe("true");
+
+    // Step 2: Search -> Config. The step the old code could not make.
+    fireEvent.keyDown(document.activeElement!, { key: "ArrowDown" });
+    const config = screen.getByRole("radio", { name: "Config" });
+    expect(document.activeElement).toBe(config);
+    expect(config.getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByTestId("config-probe")).toBeTruthy();
+  });
+
+  it("jumps to the last and first rail views with End and Home", () => {
+    renderSurface({ extraViews: [configView, changesView] });
+    const explorer = screen.getByRole("radio", { name: "Explorer" });
+    explorer.focus();
+
+    fireEvent.keyDown(document.activeElement!, { key: "End" });
+    const changes = screen.getByRole("radio", { name: "Changes (3)" });
+    expect(document.activeElement).toBe(changes);
+    expect(changes.getAttribute("aria-checked")).toBe("true");
+
+    fireEvent.keyDown(document.activeElement!, { key: "Home" });
+    const explorerAgain = screen.getByRole("radio", { name: "Explorer" });
+    expect(document.activeElement).toBe(explorerAgain);
+    expect(explorerAgain.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("moves focus with selection in the Name|Text search-mode toggle", () => {
+    renderSurface({ searcher });
+    fireEvent.click(screen.getByRole("radio", { name: "Search" }));
+    const toggle = screen.getByRole("radiogroup", { name: "Search mode" });
+    const name = within(toggle).getByRole("radio", { name: "Name" });
+    name.focus();
+
+    fireEvent.keyDown(document.activeElement!, { key: "ArrowRight" });
+    const text = within(toggle).getByRole("radio", { name: "Text" });
+    expect(document.activeElement).toBe(text);
+    expect(text.getAttribute("aria-checked")).toBe("true");
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/workspace/__tests__/a11y/harness.tsx

@@ -0,0 +1,140 @@
+// Shared harness for the browser-mode accessibility audits (DD-22).
+//
+// Renders an audited component inside the `.stgm` scope against the SDK's
+// SHIPPED stylesheet (the prebuilt `dist/styles.css`, not a test-time
+// recompile), then runs axe-core with the SAME policy as the e2e page audit
+// (`test/e2e/tests/functional/accessibility.spec.ts`): WCAG 2.0 A/AA tags,
+// fail on critical/serious, log moderate/minor.
+//
+// Why this file exists and how it stays honest:
+// - Contrast/target-size are the point, so it runs in a real browser via
+//   `vitest.a11y.config.ts` (happy-dom can't evaluate either).
+// - axe is scoped to the rendered container and restricted to WCAG tags, so
+//   page-level rules (`region`, `landmark-one-main`, `html-has-lang`, …) don't
+//   false-positive on a component rendered in isolation.
+// - The wrapper carries the themed background so `color-contrast` is measured
+//   against the real surface color in BOTH color modes, not the browser default.
+
+import "../../../../dist/styles.css";
+
+import { render, cleanup } from "@testing-library/react";
+import type { ReactElement } from "react";
+import axe from "axe-core";
+import { expect } from "vitest";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../../context.js";
+import { __clearWorkspaceListingCache } from "../../workspaceListingCache.js";
+
+/** The color modes every state is audited under. */
+export const COLOR_MODES = ["light", "dark"] as const;
+export type ColorMode = (typeof COLOR_MODES)[number];
+
+/**
+ * Rules that are audited but reported as advisory (logged, non-blocking) rather
+ * than failing the suite — mirroring the e2e audit's graduated rollout, which
+ * ships fixing only some severities first.
+ *
+ * `color-contrast`: the workspace panel's deliberately-dense small muted text
+ * (tree labels, section headers, `text-[0.65rem]` path subtitles/previews,
+ * count badges, the empty-state placeholder) falls below WCAG AA 4.5:1 in both
+ * modes. This is a PRE-EXISTING, app-wide design-token/density concern (the
+ * `--stgm-muted-foreground` token at small sizes), not a Session 18 regression,
+ * and its fix needs a deliberate design pass across presets (tracked in DD-22's
+ * Follow-ups). Kept advisory here so this audit can land and guard the
+ * STRUCTURAL hardening (roles, names, relationships, nesting) immediately.
+ * Promote back to blocking once the contrast pass ships.
+ */
+const ADVISORY_RULE_IDS = new Set<string>(["color-contrast"]);
+
+// The audited surfaces reach the SDK client only through the diff path's
+// artifact hooks, which skip all fetches for inline file changes (the only kind
+// the fixtures build). No client method is ever invoked, so an empty stub is
+// sufficient — and required, since `useStigmer` throws outside a provider.
+const stubClient = {} as unknown as Stigmer;
+
+/**
+ * Render `ui` inside a themed `.stgm` container for the given color mode.
+ * Returns the container so callers can await the settled DOM before auditing.
+ */
+export function renderAudited(ui: ReactElement, mode: ColorMode): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "stgm";
+  container.setAttribute("data-stgm-color-mode", mode);
+  // The panel always sits on a themed surface; matching it here means
+  // color-contrast is computed against the real background, not body white.
+  container.style.background = "var(--stgm-background)";
+  container.style.color = "var(--stgm-foreground)";
+  // A fixed height gives the flex/scroll surfaces (ResizableSplit, editor pane)
+  // a real box to lay out in — observer-driven measurement that is a no-op in
+  // happy-dom but correct in Chromium.
+  container.style.height = "720px";
+  container.style.width = "1024px";
+  // RTL does NOT attach a caller-provided container to the document, so attach
+  // it ourselves — both `screen` queries and axe need it in the live DOM.
+  document.body.appendChild(container);
+
+  render(<StigmerContext.Provider value={stubClient}>{ui}</StigmerContext.Provider>, {
+    container,
+  });
+  return container;
+}
+
+function summarize(violations: axe.Result[]): string {
+  return violations
+    .map((v) => {
+      const nodes = v.nodes
+        .slice(0, 5)
+        .map((n) => `    · ${n.target.join(" ")}\n      ${n.html.slice(0, 160)}`)
+        .join("\n");
+      return `  [${v.impact}] ${v.id}: ${v.help} (${v.nodes.length} node(s))\n${nodes}`;
+    })
+    .join("\n");
+}
+
+/**
+ * Run the WCAG 2.0 A/AA audit over `container`. Fails the test on any
+ * critical/serious violation (mirroring the e2e gate); logs moderate/minor.
+ */
+export async function auditA11y(container: HTMLElement, label: string): Promise<void> {
+  const results = await axe.run(container, {
+    runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] },
+  });
+
+  // Blocking: critical/serious violations that are NOT on the advisory list.
+  const serious = results.violations.filter(
+    (v) =>
+      (v.impact === "critical" || v.impact === "serious") &&
+      !ADVISORY_RULE_IDS.has(v.id),
+  );
+  // Advisory: everything else worth logging — the deferred rules plus any
+  // moderate/minor findings.
+  const advisory = results.violations.filter(
+    (v) =>
+      ADVISORY_RULE_IDS.has(v.id) ||
+      v.impact === "moderate" ||
+      v.impact === "minor",
+  );
+
+  if (advisory.length > 0) {
+    // Non-blocking a11y signal (mirrors the e2e audit's moderate/minor logging).
+    console.warn(`[a11y: ${label}] non-blocking violations:\n${summarize(advisory)}`);
+  }
+
+  expect(
+    serious,
+    `[a11y: ${label}] critical/serious axe violations:\n${summarize(serious)}`,
+  ).toHaveLength(0);
+}
+
+/**
+ * Reset cross-test state. The listing cache is module-level (keyed by entry id),
+ * so without this a scenario could take a prior scenario's cached listing —
+ * masking the truncation banner or leaking a stale tree. Call in `afterEach`.
+ */
+export function resetWorkspaceAudit(): void {
+  cleanup();
+  // cleanup() unmounts React trees but does not remove caller-provided
+  // containers; drop any leftover `.stgm` wrappers so scenarios never bleed.
+  document.querySelectorAll(".stgm").forEach((node) => node.remove());
+  __clearWorkspaceListingCache();
+}

package/src/workspace/__tests__/a11y/mock-capabilities.ts

@@ -0,0 +1,138 @@
+// In-memory workspace capabilities for the browser-mode accessibility audit
+// (DD-22). These mirror the shapes a real host injects (DD-004) — a GitHub
+// lister/reader on web, a Tauri walker on desktop — but serve a tiny fixed
+// tree so the Session 18 hardened surfaces render deterministically, with no
+// network, backend, or token. Fixtures render REAL component output only; they
+// introduce no Tailwind utility classes of their own, so the prebuilt
+// `dist/styles.css` (generated by `@source` scanning over SDK source) covers
+// every class in the audited DOM.
+
+import { create } from "@bufbuild/protobuf";
+import {
+  FileChangeSchema,
+  FileContentSchema,
+  type FileChange,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import {
+  FileChangeCaptureLevel,
+  FileChangeType,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { WorkspaceEntry } from "../../useWorkspaceEntries.js";
+import type {
+  WorkspaceFileEntry,
+  WorkspaceFileLister,
+} from "../../WorkspaceFileLister.js";
+import type {
+  WorkspaceFileContent,
+  WorkspaceFileReader,
+} from "../../WorkspaceFileReader.js";
+import type { WorkspaceContentSearcher } from "../../WorkspaceContentSearcher.js";
+
+/** A git entry whose listing is a normal (non-truncated) multi-level tree. */
+export const EXPLORER_ENTRY: WorkspaceEntry = {
+  id: "a11y-explorer",
+  name: "acme/app",
+  type: "git",
+  gitUrl: "https://github.com/acme/app.git",
+  gitBranch: "main",
+};
+
+/** A git entry whose listing is capped, exercising the truncation banner. */
+export const TRUNCATED_ENTRY: WorkspaceEntry = {
+  id: "a11y-truncated",
+  name: "acme/monorepo",
+  type: "git",
+  gitUrl: "https://github.com/acme/monorepo.git",
+  gitBranch: "main",
+};
+
+/** The file opened by the viewer audits (present in {@link EXPLORER_ENTRY}). */
+export const OPEN_FILE_PATH = "src/index.ts";
+
+const OPEN_FILE_TEXT = [
+  "export interface Greeting {",
+  "  readonly message: string;",
+  "}",
+  "",
+  "export function greet(name: string): Greeting {",
+  "  return { message: `Hello, ${name}!` };",
+  "}",
+  "",
+].join("\n");
+
+const EXPLORER_LISTING: readonly WorkspaceFileEntry[] = [
+  { path: "src", isDirectory: true },
+  { path: "src/index.ts", isDirectory: false },
+  { path: "src/lib", isDirectory: true },
+  { path: "src/lib/format.ts", isDirectory: false },
+  { path: "src/lib/logo.png", isDirectory: false },
+  { path: "README.md", isDirectory: false },
+  { path: "package.json", isDirectory: false },
+];
+
+const TRUNCATED_LISTING: readonly WorkspaceFileEntry[] = [
+  { path: "src", isDirectory: true },
+  { path: "src/a.ts", isDirectory: false },
+  { path: "src/b.ts", isDirectory: false },
+  // The lister's advisory notice — the cache collapses this into the single
+  // `truncated` banner the audit asserts is accessible (DD-11).
+  { path: "Listing truncated — repository too large.", isDirectory: false, notice: true },
+];
+
+/** Lister serving the fixed tree, keyed by entry id. */
+export const mockLister: WorkspaceFileLister = async (entry) => {
+  if (entry.id === TRUNCATED_ENTRY.id) return [...TRUNCATED_LISTING];
+  if (entry.id === EXPLORER_ENTRY.id) return [...EXPLORER_LISTING];
+  return [];
+};
+
+const TEXT_CONTENT: WorkspaceFileContent = {
+  text: OPEN_FILE_TEXT,
+  isBinary: false,
+  size: OPEN_FILE_TEXT.length,
+  encoding: "utf-8",
+};
+
+const BINARY_CONTENT: WorkspaceFileContent = {
+  text: null,
+  isBinary: true,
+  size: 2048,
+  encoding: "base64",
+};
+
+/** Reader returning text for source files and a binary sentinel for the png. */
+export const mockReader: WorkspaceFileReader = async (_entry, path) => {
+  if (path.endsWith(".png")) return BINARY_CONTENT;
+  return TEXT_CONTENT;
+};
+
+/** Content searcher returning a couple of deterministic line hits. */
+export const mockSearcher: WorkspaceContentSearcher = async (entry, query) => {
+  if (entry.id !== EXPLORER_ENTRY.id) return null;
+  return {
+    matches: [
+      { path: "src/index.ts", line: 5, preview: `export function ${query}(name: string): Greeting {` },
+      { path: "src/lib/format.ts", line: 2, preview: `  // ${query} helper` },
+    ],
+    truncated: false,
+  };
+};
+
+/**
+ * An inline (non-offloaded) MODIFY change for the open file, so the diff pane
+ * resolves its before/after text synchronously — `useFileChangeContent` issues
+ * no artifact fetch for inline sides, so the audit needs no live backend.
+ */
+export function fileChangeForOpenFile(): FileChange {
+  return create(FileChangeSchema, {
+    path: OPEN_FILE_PATH,
+    changeType: FileChangeType.MODIFY,
+    captureLevel: FileChangeCaptureLevel.WHOLE_FILE,
+    before: create(FileContentSchema, {
+      body: { case: "inline", value: "export function greet(name: string) {\n  return name;\n}\n" },
+    }),
+    after: create(FileContentSchema, {
+      body: { case: "inline", value: OPEN_FILE_TEXT },
+    }),
+  });
+}

package/src/workspace/__tests__/a11y/workspace-editor.a11y.test.tsx

@@ -0,0 +1,65 @@
+// Accessibility audit (DD-22) — WorkspaceEditor (the Config-facet workspace
+// entry manager).
+//
+// Covers the Session 18 hardening here: aria-labeled git inputs and focus rings
+// on the editor's buttons. Audits two states — the default action list and the
+// manual "add git repository" form — in light + dark against the shipped CSS.
+
+import { describe, it, afterEach } from "vitest";
+import { screen } from "@testing-library/react";
+import { WorkspaceEditor } from "../../WorkspaceEditor.js";
+import type { UseWorkspaceEntriesReturn } from "../../useWorkspaceEntries.js";
+import {
+  COLOR_MODES,
+  auditA11y,
+  renderAudited,
+  resetWorkspaceAudit,
+} from "./harness.js";
+
+/** A minimal workspace hook return — rendering only reads `entries`. */
+function mockWorkspace(
+  entries: UseWorkspaceEntriesReturn["entries"] = [],
+): UseWorkspaceEntriesReturn {
+  return {
+    entries,
+    addGitRepo: () => {},
+    addLocalPath: () => {},
+    remove: () => {},
+    clear: () => {},
+    clearLocal: () => {},
+    toInput: () => [],
+    hasEntries: entries.length > 0,
+  };
+}
+
+const GIT_ENTRY = {
+  id: "editor-entry",
+  name: "acme/app",
+  type: "git" as const,
+  gitUrl: "https://github.com/acme/app.git",
+  gitBranch: "main",
+};
+
+afterEach(resetWorkspaceAudit);
+
+describe("WorkspaceEditor a11y", () => {
+  it.each(COLOR_MODES)("default action list with an entry (%s)", async (mode) => {
+    const container = renderAudited(
+      <WorkspaceEditor workspace={mockWorkspace([GIT_ENTRY])} enableLocal />,
+      mode,
+    );
+    await screen.findByText("Connect GitHub");
+    await auditA11y(container, `editor list · ${mode}`);
+  });
+
+  it.each(COLOR_MODES)("manual add-git form with labeled inputs (%s)", async (mode) => {
+    const container = renderAudited(
+      // Empty entries + initialPanel="github" with no connection opens the
+      // manual URL/branch form (the labeled git inputs Session 18 hardened).
+      <WorkspaceEditor workspace={mockWorkspace()} initialPanel="github" />,
+      mode,
+    );
+    await screen.findByLabelText("Git repository URL");
+    await auditA11y(container, `editor git form · ${mode}`);
+  });
+});

package/src/workspace/__tests__/a11y/workspace-explorer-search.a11y.test.tsx

@@ -0,0 +1,112 @@
+// Accessibility audit (DD-22) — the explorer tree and both search surfaces.
+//
+// Covers the Session 18 hardening for these surfaces: file-tree `role="tree"` +
+// `aria-level` + `aria-hidden` glyphs, the neutral truncation banner + Retry
+// focus ring, the search `role="status"` live region, the combobox/listbox
+// results, and the `Name | Text` search-mode radiogroup — each in light + dark
+// against the shipped stylesheet.
+
+import { describe, it, afterEach } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import { WorkspaceSurface } from "../../WorkspaceSurface.js";
+import {
+  EXPLORER_ENTRY,
+  TRUNCATED_ENTRY,
+  mockLister,
+  mockReader,
+  mockSearcher,
+} from "./mock-capabilities.js";
+import {
+  COLOR_MODES,
+  auditA11y,
+  renderAudited,
+  resetWorkspaceAudit,
+} from "./harness.js";
+
+const noop = () => {};
+
+/** The controlled props every WorkspaceSurface render needs, minus the ones a
+ *  given scenario varies (entries/lister/searcher/view). */
+const baseProps = {
+  reader: mockReader,
+  editors: [],
+  selectedFile: null,
+  onOpenFile: noop,
+  onActivateEditor: noop,
+  onPinEditor: noop,
+  onCloseEditor: noop,
+  onCollapse: noop,
+};
+
+afterEach(resetWorkspaceAudit);
+
+describe("WorkspaceSurface a11y — explorer + search", () => {
+  it.each(COLOR_MODES)("explorer tree, populated listing (%s)", async (mode) => {
+    const container = renderAudited(
+      <WorkspaceSurface
+        entries={[EXPLORER_ENTRY]}
+        lister={mockLister}
+        view="files"
+        {...baseProps}
+      />,
+      mode,
+    );
+    // The first root auto-expands; wait for a top-level file before auditing so
+    // axe sees the loaded tree, not the loading state.
+    await screen.findByText("README.md");
+    await auditA11y(container, `explorer tree · ${mode}`);
+  });
+
+  it.each(COLOR_MODES)("explorer truncation banner (%s)", async (mode) => {
+    const container = renderAudited(
+      <WorkspaceSurface
+        entries={[TRUNCATED_ENTRY]}
+        lister={mockLister}
+        view="files"
+        {...baseProps}
+      />,
+      mode,
+    );
+    await screen.findByText(/Showing a partial listing/i);
+    await auditA11y(container, `explorer truncation · ${mode}`);
+  });
+
+  it.each(COLOR_MODES)("filename search with results (%s)", async (mode) => {
+    const container = renderAudited(
+      <WorkspaceSurface
+        entries={[EXPLORER_ENTRY]}
+        lister={mockLister}
+        searcher={mockSearcher}
+        view="search"
+        {...baseProps}
+      />,
+      mode,
+    );
+    const input = await screen.findByRole("combobox", {
+      name: "Search workspace files by name",
+    });
+    fireEvent.change(input, { target: { value: "index" } });
+    await screen.findByRole("listbox", { name: "Search results" });
+    await auditA11y(container, `filename search · ${mode}`);
+  });
+
+  it.each(COLOR_MODES)("content (text) search with results (%s)", async (mode) => {
+    const container = renderAudited(
+      <WorkspaceSurface
+        entries={[EXPLORER_ENTRY]}
+        lister={mockLister}
+        searcher={mockSearcher}
+        view="search"
+        {...baseProps}
+      />,
+      mode,
+    );
+    fireEvent.click(await screen.findByRole("radio", { name: "Text" }));
+    const input = await screen.findByRole("combobox", {
+      name: "Search text in workspace files",
+    });
+    fireEvent.change(input, { target: { value: "greet" } });
+    await screen.findByRole("listbox", { name: "Search results" });
+    await auditA11y(container, `content search · ${mode}`);
+  });
+});