@stigmer/react 3.1.2 → 3.1.4

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 () => {

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