@stigmer/react 3.1.2 → 3.1.3

package/src/workspace/WorkspaceEditor.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback, useEffect, type KeyboardEvent } from "react";
+import { cn } from "@stigmer/theme";
 import type { UseWorkspaceEntriesReturn } from "./useWorkspaceEntries.js";
 import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection.js";
 import { GitHubRepoPicker } from "../github/GitHubRepoPicker.js";
@@ -136,11 +137,11 @@ export function WorkspaceEditor({
 
   if (activePanel === "github" && enableGitHub) {
     return (
-      <div className={["space-y-2", className].filter(Boolean).join(" ")}>
+      <div className={cn("space-y-2", className)}>
         <button
           type="button"
           onClick={goBack}
-          className="inline-flex items-center gap-1 text-[0.65rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="inline-flex items-center gap-1 rounded-sm text-[0.65rem] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <ChevronLeftIcon />
           Back
@@ -180,7 +181,7 @@ export function WorkspaceEditor({
   // ---------------------------------------------------------------------------
 
   return (
-    <div className={["space-y-2", className].filter(Boolean).join(" ")}>
+    <div className={cn("space-y-2", className)}>
       {/* Entry list */}
       {workspace.entries.length > 0 && (
         <div className="relative">
@@ -202,10 +203,10 @@ export function WorkspaceEditor({
                   </span>
                 )}
                 <span
-                  className={[
+                  className={cn(
                     "min-w-0 flex-1 truncate text-foreground",
-                    entry.type === "local" ? "[direction:rtl] text-left" : "",
-                  ].join(" ")}
+                    entry.type === "local" && "[direction:rtl] text-left",
+                  )}
                   title={entry.name}
                 >
                   <bdi>{entry.name}</bdi>
@@ -214,7 +215,7 @@ export function WorkspaceEditor({
                   type="button"
                   onClick={() => workspace.remove(entry.id)}
                   disabled={disabled}
-                  className="shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+                  className="shrink-0 rounded-sm text-muted-foreground transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none"
                   aria-label={`Remove ${entry.name}`}
                 >
                   <XIcon />
@@ -237,7 +238,7 @@ export function WorkspaceEditor({
               if (path) workspace.addLocalPath(path);
             }}
             disabled={disabled}
-            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover disabled:pointer-events-none disabled:opacity-40"
+            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
           >
             <FolderIcon />
             <span className="flex-1 text-left">Browse Folder</span>
@@ -248,7 +249,7 @@ export function WorkspaceEditor({
             type="button"
             onClick={() => setActivePanel("github")}
             disabled={disabled}
-            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover disabled:pointer-events-none disabled:opacity-40"
+            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
           >
             <GitHubIcon />
             <span className="flex-1 text-left">Connect GitHub</span>
@@ -307,14 +308,14 @@ function GitHubPanel({
               <button
                 type="button"
                 onClick={() => connection.connect(redirectUri, { popup: true })}
-                className="rounded-md px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                className="rounded-md px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 Try again
               </button>
               <button
                 type="button"
                 onClick={() => connection.connect(redirectUri)}
-                className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground-hover transition-colors"
+                className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background transition-colors hover:bg-foreground-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <GitHubIcon />
                 <span>Continue with redirect</span>
@@ -325,7 +326,7 @@ function GitHubPanel({
           <button
             type="button"
             onClick={() => connection.connect(redirectUri, { popup: true })}
-            className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground-hover transition-colors"
+            className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background transition-colors hover:bg-foreground-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             <GitHubIcon />
             <span>Connect GitHub</span>
@@ -353,7 +354,7 @@ function GitHubPanel({
         <button
           type="button"
           onClick={connection.disconnect}
-          className="text-[0.6rem] text-muted-foreground hover:text-destructive transition-colors"
+          className="rounded-sm text-[0.6rem] text-muted-foreground transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           Disconnect
         </button>
@@ -392,6 +393,7 @@ function ManualGitPanel({
     <div className="space-y-2">
       <input
         type="url"
+        aria-label="Git repository URL"
         placeholder="https://github.com/org/repo.git"
         value={url}
         onChange={(e) => onUrlChange(e.target.value)}
@@ -401,6 +403,7 @@ function ManualGitPanel({
       />
       <input
         type="text"
+        aria-label="Branch (optional)"
         placeholder="Branch (optional)"
         value={branch}
         onChange={(e) => onBranchChange(e.target.value)}
@@ -411,7 +414,7 @@ function ManualGitPanel({
         <button
           type="button"
           onClick={onCancel}
-          className="rounded-md px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          className="rounded-md px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           Cancel
         </button>
@@ -419,7 +422,7 @@ function ManualGitPanel({
           type="button"
           onClick={onAdd}
           disabled={!url.trim()}
-          className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
+          className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
         >
           Add
         </button>
@@ -453,7 +456,7 @@ function GitHubConnectingState({ onCancel }: { onCancel: () => void }) {
       <button
         type="button"
         onClick={onCancel}
-        className="text-[0.65rem] text-muted-foreground hover:text-foreground transition-colors"
+        className="rounded-sm text-[0.65rem] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       >
         Cancel
       </button>

package/src/workspace/WorkspaceFileSearch.tsx

@@ -132,8 +132,27 @@ export function WorkspaceFileSearch({
   const trimmed = query.trim();
   const showGroupHeaders = groups.length > 1;
 
+  // A concise, screen-reader-only summary of the current result state. It lives
+  // in a persistent polite live region (below) so status changes are announced
+  // even as the visible states — which live in separate, unmounting branches —
+  // swap. Deliberately terse: never the result list itself, only its shape.
+  const statusMessage = isUnsupported
+    ? ""
+    : trimmed.length === 0
+      ? ""
+      : isLoading && totalMatches === 0 && groups.length === 0
+        ? "Searching files…"
+        : groups.length === 0
+          ? `No files matching ${trimmed}.`
+          : totalMatches > flatResults.length
+            ? `Showing the first ${flatResults.length} of ${totalMatches} matching files.`
+            : `${flatResults.length} matching ${flatResults.length === 1 ? "file" : "files"}.`;
+
   return (
     <div className={cn("flex h-full flex-col", className)}>
+      <div role="status" aria-live="polite" className="sr-only">
+        {statusMessage}
+      </div>
       <div className="flex items-center gap-1.5 border-b border-border px-2 py-1.5">
         <SearchIcon />
         <input
@@ -264,7 +283,7 @@ function renderRows({
     if (group.truncated) {
       rows.push(
         <GroupNotice key={`t:${group.entry.id}`}>
-          Partial listing — this repository has too many files to search in full.
+          Partial listing — too many files to search in full.
         </GroupNotice>,
       );
     }
@@ -299,39 +318,43 @@ function ResultRow({
   const basename = match.path.slice(lastSlash + 1);
   const dir = lastSlash >= 0 ? match.path.slice(0, lastSlash) : "";
 
+  // The `role="option"` IS the interactive leaf of the listbox (keyboard
+  // activation flows through the combobox input's Enter handler +
+  // aria-activedescendant). It must not nest another interactive control — a
+  // button inside would violate WCAG 4.1.2 (axe `nested-interactive`). So the
+  // click handler and row styling live on the option itself.
   return (
-    <li id={id} role="option" aria-selected={isFocused}>
-      <button
-        type="button"
-        onClick={onOpen}
-        tabIndex={-1}
-        aria-current={isOpen ? "true" : undefined}
-        className={cn(
-          "flex w-full items-baseline gap-1.5 px-3 py-1 text-left text-xs transition-colors",
-          isFocused && "bg-muted",
-          isOpen && "bg-muted font-medium text-foreground",
-          !isFocused && !isOpen && "hover:bg-muted",
-        )}
-      >
-        <span className="truncate text-foreground">
+    <li
+      id={id}
+      role="option"
+      aria-selected={isFocused}
+      aria-current={isOpen ? "true" : undefined}
+      onClick={onOpen}
+      className={cn(
+        "flex cursor-pointer items-baseline gap-1.5 px-3 py-1 text-xs transition-colors",
+        isFocused && "bg-muted",
+        isOpen && "bg-muted font-medium text-foreground",
+        !isFocused && !isOpen && "hover:bg-muted",
+      )}
+    >
+      <span className="truncate text-foreground">
+        <HighlightedPath
+          text={basename}
+          offset={lastSlash + 1}
+          matchStart={match.matchStart}
+          matchEnd={match.matchEnd}
+        />
+      </span>
+      {dir && (
+        <span className="truncate text-[0.65rem] text-muted-foreground">
           <HighlightedPath
-            text={basename}
-            offset={lastSlash + 1}
+            text={dir}
+            offset={0}
             matchStart={match.matchStart}
             matchEnd={match.matchEnd}
           />
         </span>
-        {dir && (
-          <span className="truncate text-[0.65rem] text-muted-foreground">
-            <HighlightedPath
-              text={dir}
-              offset={0}
-              matchStart={match.matchStart}
-              matchEnd={match.matchEnd}
-            />
-          </span>
-        )}
-      </button>
+      )}
     </li>
   );
 }

package/src/workspace/WorkspaceSurface.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { useCallback, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import {
+  useCallback,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
 import { cn } from "@stigmer/theme";
 import type { FileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { ResizableSplit } from "../internal/ResizableSplit.js";
@@ -18,7 +25,7 @@ import type { WorkspaceContentSearcher } from "./WorkspaceContentSearcher.js";
 import { WorkspaceFileSearch } from "./WorkspaceFileSearch.js";
 import { WorkspaceContentSearch } from "./WorkspaceContentSearch.js";
 import { FileViewer, type FileViewerHandle } from "./FileViewer.js";
-import { EditorTabs } from "./EditorTabs.js";
+import { EditorTabs, editorTabDomId } from "./EditorTabs.js";
 import { ExplorerTree } from "./ExplorerTree.js";
 
 /** The built-in rail views every surface has. */
@@ -302,8 +309,14 @@ function ActivityRail({
     ...(extraViews ?? []),
   ];
 
-  // Roving selection: arrows move relative to the *focused* item's position,
-  // so the rail scales to any number of injected views.
+  // One ref per rail button so selection can move DOM focus with it (below).
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Roving radiogroup: selection follows focus. `keydown` fires on the focused
+  // button, so its `index` is the current position; we select the neighbour AND
+  // move focus to it. Moving focus is essential — without it focus stays pinned
+  // on the entered button (whose index never changes) and every later view
+  // (Config/Changes/…) is unreachable by keyboard.
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
       let nextIndex: number | null = null;
@@ -311,10 +324,15 @@ function ActivityRail({
         nextIndex = Math.min(index + 1, items.length - 1);
       } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
         nextIndex = Math.max(index - 1, 0);
+      } else if (e.key === "Home") {
+        nextIndex = 0;
+      } else if (e.key === "End") {
+        nextIndex = items.length - 1;
       }
       if (nextIndex === null || nextIndex === index) return;
       e.preventDefault();
       onViewChange(items[nextIndex].id);
+      buttonRefs.current[nextIndex]?.focus();
     },
     [items, onViewChange],
   );
@@ -332,6 +350,9 @@ function ActivityRail({
         return (
           <button
             key={item.id}
+            ref={(el) => {
+              buttonRefs.current[index] = el;
+            }}
             type="button"
             role="radio"
             aria-checked={isSelected}
@@ -487,14 +508,26 @@ function SearchModeToggle({
     { value: "text", label: "Text" },
   ];
 
+  // Selection follows focus, matching ActivityRail / ViewerModeToggle.
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const selectMode = useCallback(
+    (next: SearchMode) => {
+      onChange(next);
+      buttonRefs.current[next === "name" ? 0 : 1]?.focus();
+    },
+    [onChange],
+  );
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLButtonElement>) => {
-      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
         e.preventDefault();
-        onChange(value === "name" ? "text" : "name");
+        selectMode("text");
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        selectMode("name");
       }
     },
-    [value, onChange],
+    [selectMode],
   );
 
   return (
@@ -504,11 +537,14 @@ function SearchModeToggle({
         aria-label="Search mode"
         className="inline-flex rounded-md bg-muted p-0.5"
       >
-        {options.map((option) => {
+        {options.map((option, index) => {
           const isSelected = value === option.value;
           return (
             <button
               key={option.value}
+              ref={(el) => {
+                buttonRefs.current[index] = el;
+              }}
               type="button"
               role="radio"
               aria-checked={isSelected}
@@ -579,6 +615,10 @@ function EditorArea({
   readonly onCollapse: () => void;
 }) {
   const viewerRef = useRef<FileViewerHandle>(null);
+  // Instance-scoped ids tie each tab to the single editor body (tabpanel).
+  const idBase = useId();
+  const panelId = `${idBase}editor-panel`;
+  const tabIdPrefix = `${idBase}editor-tab-`;
   const activeKey = selectedFile
     ? editorKey(selectedFile.entryId, selectedFile.path)
     : null;
@@ -616,51 +656,69 @@ function EditorArea({
             onActivate={onActivateEditor}
             onPin={onPinEditor}
             onClose={onCloseEditor}
+            panelId={panelId}
+            tabIdPrefix={tabIdPrefix}
             className="min-w-0 flex-1 border-b-0"
           />
         )}
       </div>
-      {activeVirtualDocument ? (
-        // A virtual document owns its body wholesale: no breadcrumbs (there is
-        // no filesystem location) and no FileViewer (there is no reader-backed
-        // file). Keyed like files so switching documents resets cleanly.
-        // Vertical-only scrolling: a lone overflow-y-auto would compute
-        // overflow-x to auto too, giving the pane a horizontal scrollbar the
-        // moment any child refuses to shrink — documents must reflow instead.
-        <div
-          key={activeKey ?? undefined}
-          className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden"
-        >
-          {activeVirtualDocument.content}
-        </div>
-      ) : selectedFile ? (
-        <>
-          <Breadcrumbs
-            entryName={activeEntryName}
-            path={selectedFile.path}
-            onRefresh={reader ? () => viewerRef.current?.refresh() : undefined}
-          />
-          {/* Per-file remount (key) resets scroll and view-mode state cleanly.
-              The tab strip + breadcrumbs own the file identity, close, and
-              refresh, so the viewer is chrome-less; Escape still collapses. */}
-          <FileViewer
-            ref={viewerRef}
+      {/* The single editor body — the one tabpanel the tab strip controls (the
+          content swaps; the panel is stable). role/labelledby apply only with an
+          active tab (the empty state has no tab to label). Carries the same
+          flex/min-w-0 chain as the branches so the DD-20 reflow is preserved:
+          the wrapper is just a labelled passthrough, not a new layout context. */}
+      <div
+        className="flex min-h-0 min-w-0 flex-1 flex-col"
+        {...(activeKey
+          ? {
+              role: "tabpanel",
+              id: panelId,
+              "aria-labelledby": editorTabDomId(tabIdPrefix, activeKey),
+            }
+          : {})}
+      >
+        {activeVirtualDocument ? (
+          // A virtual document owns its body wholesale: no breadcrumbs (there is
+          // no filesystem location) and no FileViewer (there is no reader-backed
+          // file). Keyed like files so switching documents resets cleanly.
+          // Vertical-only scrolling: a lone overflow-y-auto would compute
+          // overflow-x to auto too, giving the pane a horizontal scrollbar the
+          // moment any child refuses to shrink — documents must reflow instead.
+          <div
             key={activeKey ?? undefined}
-            selectedFile={selectedFile}
-            entries={entries}
-            reader={reader}
-            change={change}
-            reveal={reveal}
-            onClose={onCollapse}
-            showHeader={false}
-            className="min-h-0 flex-1"
-          />
-        </>
-      ) : (
-        <div className="flex flex-1 items-center justify-center p-8 text-center text-xs text-muted-foreground">
-          Select a file to view its contents.
-        </div>
-      )}
+            className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden"
+          >
+            {activeVirtualDocument.content}
+          </div>
+        ) : selectedFile ? (
+          <>
+            <Breadcrumbs
+              entryName={activeEntryName}
+              path={selectedFile.path}
+              onRefresh={reader ? () => viewerRef.current?.refresh() : undefined}
+            />
+            {/* Per-file remount (key) resets scroll and view-mode state cleanly.
+                The tab strip + breadcrumbs own the file identity, close, and
+                refresh, so the viewer is chrome-less; Escape still collapses. */}
+            <FileViewer
+              ref={viewerRef}
+              key={activeKey ?? undefined}
+              selectedFile={selectedFile}
+              entries={entries}
+              reader={reader}
+              change={change}
+              reveal={reveal}
+              onClose={onCollapse}
+              showHeader={false}
+              className="min-h-0 flex-1"
+            />
+          </>
+        ) : (
+          <div className="flex flex-1 items-center justify-center p-8 text-center text-xs text-muted-foreground">
+            Select a file to view its contents.
+          </div>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -67,9 +67,11 @@ describe("EditorTabs", () => {
     expect(onPin).toHaveBeenCalledWith("e1", "src/b.ts");
   });
 
-  it("closes a tab via its close button", () => {
+  it("closes a tab via its close affordance (presentational, aria-hidden)", () => {
     const { onClose } = renderTabs();
-    fireEvent.click(screen.getByRole("button", { name: "Close a.ts" }));
+    // The close "X" is a presentational span (not a nested button) to satisfy
+    // WCAG 4.1.2; it is addressable by its title.
+    fireEvent.click(screen.getByTitle("Close a.ts"));
     expect(onClose).toHaveBeenCalledWith("e1", "src/a.ts");
   });
 

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

@@ -149,4 +149,56 @@ describe("ExplorerTree", () => {
       screen.queryByRole("button", { name: /Remove .* from workspace/ }),
     ).toBeNull();
   });
+
+  it("exposes tree depth via aria-level and keeps aria-expanded on the treeitem", async () => {
+    render(
+      <ExplorerTree
+        entries={[entry("x9")]}
+        lister={lister(["src/nested.ts"])}
+        selectedFile={null}
+        onOpenFile={vi.fn()}
+        onActivateFile={vi.fn()}
+      />,
+    );
+    const folder = await screen.findByText("src");
+    const folderItem = folder.closest('[role="treeitem"]')!;
+    // Top-level treeitem is level 1; expandability is announced on the treeitem.
+    expect(folderItem.getAttribute("aria-level")).toBe("1");
+    expect(folderItem.getAttribute("aria-expanded")).toBe("false");
+
+    fireEvent.click(folder);
+    const nested = await screen.findByText("nested.ts");
+    expect(nested.closest('[role="treeitem"]')!.getAttribute("aria-level")).toBe(
+      "2",
+    );
+  });
+
+  it("shows a substrate-agnostic truncation banner from a notice entry (DD-11)", async () => {
+    // A lister that signals an incomplete listing via a `notice` entry (as the
+    // desktop and GitHub listers do). The advisory is stripped from the tree and
+    // surfaced as a banner instead.
+    const truncatedLister: WorkspaceFileLister = vi.fn(async () => [
+      { path: "a.ts", isDirectory: false },
+      {
+        path: "... (listing truncated)",
+        isDirectory: false,
+        notice: true as const,
+      },
+    ]);
+    render(
+      <ExplorerTree
+        entries={[entry("x8")]}
+        lister={truncatedLister}
+        selectedFile={null}
+        onOpenFile={vi.fn()}
+        onActivateFile={vi.fn()}
+      />,
+    );
+    const banner = await screen.findByText(/too many files to load in full/i);
+    expect(banner).toBeTruthy();
+    // Wording must read correctly for a local folder, not just a git repo.
+    expect(banner.textContent).not.toMatch(/repository/i);
+    // The notice advisory is never an openable tree leaf.
+    expect(screen.queryByText("... (listing truncated)")).toBeNull();
+  });
 });

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

@@ -326,6 +326,24 @@ describe("FileViewer — diff mode", () => {
       expect(screen.getByRole("radio", { name: "Diff" }).getAttribute("aria-checked")).toBe("true"),
     );
   });
+
+  it("moves focus with selection when roving Diff|File", async () => {
+    render(
+      <FileViewer
+        selectedFile={{ entryId: "e1", path: "src/a.ts" }}
+        entries={ENTRIES}
+        reader={readerFor(text("live content"))}
+        change={wholeFileChange("src/a.ts")}
+      />,
+    );
+
+    const diffRadio = screen.getByRole("radio", { name: "Diff" });
+    diffRadio.focus();
+    fireEvent.keyDown(diffRadio, { key: "ArrowRight" });
+    await waitFor(() =>
+      expect(document.activeElement).toBe(screen.getByRole("radio", { name: "File" })),
+    );
+  });
 });
 
 // ---------------------------------------------------------------------------

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, fireEvent, cleanup, within } from "@testing-library/react";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import { WorkspaceContentSearch } from "../WorkspaceContentSearch";
 import type { WorkspaceEntry } from "../useWorkspaceEntries";
 import type {
@@ -69,7 +69,10 @@ describe("WorkspaceContentSearch", () => {
       <WorkspaceContentSearch entries={[makeEntry()]} searcher={searcher} onOpenFile={vi.fn()} />,
     );
     typeQuery("a");
-    expect(screen.getByText(/type at least 2 characters/i)).toBeTruthy();
+    // Assert the visible message, not the parallel sr-only live-region copy.
+    expect(
+      screen.getByText(/type at least 2 characters/i, { ignore: ".sr-only" }),
+    ).toBeTruthy();
     expect(searcher).not.toHaveBeenCalled();
   });
 
@@ -96,7 +99,7 @@ describe("WorkspaceContentSearch", () => {
     // Clicking a line hit opens via the shared onOpenFile seam (the same path a
     // tree/filename click uses — this is what makes a changed file honor the
     // FileViewer diff-default; see FileViewer diff-mode suite).
-    fireEvent.click(within(options[0]).getByRole("button"));
+    fireEvent.click(options[0]);
     // The hit's line rides along so the viewer jumps to it (DR-1/DR-2).
     expect(onOpenFile).toHaveBeenCalledWith(entry.id, "src/app.ts", { line: 3 });
   });
@@ -138,7 +141,9 @@ describe("WorkspaceContentSearch", () => {
       />,
     );
     typeQuery("zzz");
-    expect(await screen.findByText(/no files containing/i)).toBeTruthy();
+    expect(
+      await screen.findByText(/no files containing/i, { ignore: ".sr-only" }),
+    ).toBeTruthy();
   });
 
   it("moves virtual focus with ArrowDown and opens on Enter", async () => {
@@ -178,7 +183,35 @@ describe("WorkspaceContentSearch", () => {
     typeQuery("foo");
     await screen.findAllByRole("option");
     expect(screen.getAllByRole("option")).toHaveLength(200);
-    expect(screen.getByText(/showing the first 200 of 250 matches/i)).toBeTruthy();
+    expect(
+      screen.getByText(/showing the first 200 of 250 matches/i, {
+        ignore: ".sr-only",
+      }),
+    ).toBeTruthy();
+  });
+
+  it("announces result status in a polite live region", async () => {
+    // Content matching is backend-delegated, so the searcher must vary by query.
+    const searcher: WorkspaceContentSearcher = vi.fn(async (_e, query) =>
+      query === "foo" ? ok([match("a.ts", 1, "foo")]) : ok([]),
+    );
+    render(
+      <WorkspaceContentSearch
+        entries={[makeEntry()]}
+        searcher={searcher}
+        onOpenFile={vi.fn()}
+      />,
+    );
+    const status = screen.getByRole("status");
+    expect(status.getAttribute("aria-live")).toBe("polite");
+
+    typeQuery("foo");
+    await screen.findByRole("option");
+    expect(status.textContent).toMatch(/match/i);
+
+    typeQuery("zzz");
+    await screen.findByText(/no files containing/i, { ignore: ".sr-only" });
+    expect(status.textContent).toMatch(/no files containing/i);
   });
 
   it("renders a truncation notice when a search was capped", async () => {