@stigmer/react 3.11.0 → 3.12.0

package/src/workspace/WorkspaceSurface.tsx

@@ -11,6 +11,12 @@ import {
 import { cn } from "@stigmer/theme";
 import type { FileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { ResizableSplit } from "../internal/ResizableSplit.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../internal/tooltip.js";
 import {
   editorKey,
   type OpenEditor,
@@ -371,50 +377,57 @@ function ActivityRail({
   );
 
   return (
-    <div
-      role="radiogroup"
-      aria-label="Workspace view"
-      aria-orientation="vertical"
-      className="stg:flex stg:w-11 stg:shrink-0 stg:flex-col stg:items-center stg:gap-1 stg:border-r stg:border-border stg:bg-muted-faint stg:py-2"
-    >
-      {items.map((item, index) => {
-        const isSelected = view === item.id;
-        const showBadge = item.badge != null && item.badge > 0;
-        return (
-          <button
-            key={item.id}
-            ref={(el) => {
-              buttonRefs.current[index] = el;
-            }}
-            type="button"
-            role="radio"
-            aria-checked={isSelected}
-            aria-label={showBadge ? `${item.label} (${item.badge})` : item.label}
-            title={item.label}
-            tabIndex={isSelected ? 0 : -1}
-            onClick={() => onViewChange(item.id)}
-            onKeyDown={(e) => handleKeyDown(e, index)}
-            className={cn(
-              "stg:relative stg:flex stg:h-9 stg:w-9 stg:items-center stg:justify-center stg:rounded-md stg:transition-colors",
-              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-              isSelected
-                ? "stg:bg-accent stg:text-foreground"
-                : "stg:text-muted-foreground stg:hover:bg-accent-hover stg:hover:text-foreground",
-            )}
-          >
-            {item.icon}
-            {showBadge && (
-              <span
-                aria-hidden="true"
-                className="stg:absolute stg:-right-0.5 stg:-top-0.5 stg:inline-flex stg:min-w-[0.875rem] stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-1 stg:py-px stg:text-[9px] stg:font-medium stg:leading-none stg:text-primary-foreground"
+    <TooltipProvider>
+      <div
+        role="radiogroup"
+        aria-label="Workspace view"
+        aria-orientation="vertical"
+        className="stg:flex stg:w-11 stg:shrink-0 stg:flex-col stg:items-center stg:gap-1 stg:border-r stg:border-border stg:bg-muted-faint stg:py-2"
+      >
+        {items.map((item, index) => {
+          const isSelected = view === item.id;
+          const showBadge = item.badge != null && item.badge > 0;
+          return (
+            <Tooltip key={item.id}>
+              <TooltipTrigger
+                render={
+                  <button
+                    ref={(el) => {
+                      buttonRefs.current[index] = el;
+                    }}
+                    type="button"
+                    role="radio"
+                    aria-checked={isSelected}
+                    aria-label={showBadge ? `${item.label} (${item.badge})` : item.label}
+                    tabIndex={isSelected ? 0 : -1}
+                    onClick={() => onViewChange(item.id)}
+                    onKeyDown={(e) => handleKeyDown(e, index)}
+                    className={cn(
+                      "stg:relative stg:flex stg:h-9 stg:w-9 stg:items-center stg:justify-center stg:rounded-md stg:transition-colors",
+                      "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                      isSelected
+                        ? "stg:bg-accent stg:text-foreground"
+                        : "stg:text-muted-foreground stg:hover:bg-accent-hover stg:hover:text-foreground",
+                    )}
+                  />
+                }
               >
-                {item.badge}
-              </span>
-            )}
-          </button>
-        );
-      })}
-    </div>
+                {item.icon}
+                {showBadge && (
+                  <span
+                    aria-hidden="true"
+                    className="stg:absolute stg:-right-0.5 stg:-top-0.5 stg:inline-flex stg:min-w-[0.875rem] stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-1 stg:py-px stg:text-[9px] stg:font-medium stg:leading-none stg:text-primary-foreground"
+                  >
+                    {item.badge}
+                  </span>
+                )}
+              </TooltipTrigger>
+              <TooltipContent side="right">{item.label}</TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </div>
+    </TooltipProvider>
   );
 }
 
@@ -684,15 +697,21 @@ function EditorArea({
           the session viewer floats its top-right controls (host
           `headerActions` and the panel chip) over this region. */}
       <div className="stg:flex stg:shrink-0 stg:items-stretch stg:border-b stg:border-border stg:pr-24">
-        <button
-          type="button"
-          onClick={onCollapse}
-          aria-label="Back to chat"
-          title="Back to chat"
-          className="stg:flex stg:shrink-0 stg:items-center stg:border-r stg:border-border stg:px-2 stg:text-muted-foreground stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring"
-        >
-          <ChevronLeftIcon />
-        </button>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                onClick={onCollapse}
+                aria-label="Back to chat"
+                className="stg:flex stg:shrink-0 stg:items-center stg:border-r stg:border-border stg:px-2 stg:text-muted-foreground stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring"
+              />
+            }
+          >
+            <ChevronLeftIcon />
+          </TooltipTrigger>
+          <TooltipContent side="top">Back to chat</TooltipContent>
+        </Tooltip>
         {editors.length > 0 && (
           <EditorTabs
             editors={editors}
@@ -800,15 +819,21 @@ function Breadcrumbs({
         })}
       </nav>
       {onRefresh && (
-        <button
-          type="button"
-          onClick={onRefresh}
-          aria-label="Reload file"
-          title="Reload file"
-          className="stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
-        >
-          <RefreshIcon />
-        </button>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                onClick={onRefresh}
+                aria-label="Reload file"
+                className="stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
+              />
+            }
+          >
+            <RefreshIcon />
+          </TooltipTrigger>
+          <TooltipContent side="top">Reload file</TooltipContent>
+        </Tooltip>
       )}
     </div>
   );

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

@@ -70,8 +70,11 @@ describe("EditorTabs", () => {
   it("closes a tab via its close affordance (presentational, aria-hidden)", () => {
     const { onClose } = renderTabs();
     // 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"));
+    // WCAG 4.1.2, and carries no native title (banned, stigmer-cloud#268) —
+    // it is the tab's only aria-hidden child.
+    const tab = screen.getByRole("tab", { name: "a.ts" });
+    const closeX = tab.querySelector('[aria-hidden="true"]');
+    fireEvent.click(closeX!);
     expect(onClose).toHaveBeenCalledWith("e1", "src/a.ts");
   });
 

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

@@ -204,13 +204,16 @@ const changesView = {
 describe("WorkspaceSurface extraViews", () => {
   it("renders injected views in the rail after the built-ins", () => {
     renderSurface({ extraViews: [configView, changesView] });
+    // Rail names live in accessible labels (hover rides the house tooltip;
+    // native titles are banned, stigmer-cloud#268).
     const radios = screen.getAllByRole("radio");
-    expect(radios.map((r) => r.getAttribute("title"))).toEqual([
+    expect(radios.map((r) => r.getAttribute("aria-label"))).toEqual([
       "Explorer",
       "Search",
       "Config",
-      "Changes",
+      "Changes (3)", // the badge count folds into the accessible name
     ]);
+    expect(radios.every((r) => r.getAttribute("title") === null)).toBe(true);
   });
 
   it("shows a count badge on a rail view and folds it into the accessible name", () => {