Tighten sidebar accessibility and menu targets

Author: pratikbuilds

apps/web/src/app.css

@@ -1677,13 +1677,9 @@ select:disabled,
   opacity: 1;
 }
 
-.shell-ch-row-menu .chat-sidebar-row-menu-trigger::after {
-  inset: 0;
-}
-
-.shell-ch-row-wrap:hover .shell-ch-right,
-.shell-ch-row-wrap:focus-within .shell-ch-right,
-.shell-ch-row-wrap:has([aria-expanded="true"]) .shell-ch-right {
+.shell-ch-row-wrap:hover .shell-ch-time,
+.shell-ch-row-wrap:focus-within .shell-ch-time,
+.shell-ch-row-wrap:has([aria-expanded="true"]) .shell-ch-time {
   visibility: hidden;
 }
 

apps/web/src/shell/workbench-list.tsx

@@ -307,6 +307,12 @@ function WorkbenchRow({
     displayWorkbenchTitle(title, workbench.id) || CHAT_STRINGS.unnamedWorkbench;
   const { sharedLabel, live, time, unread } = signals;
   const hasUnread = typeof unread === "number" && unread > 0;
+  const liveLabel =
+    live === "working"
+      ? "Agent working"
+      : live === "reply-ready"
+        ? "Reply ready"
+        : "";
 
   return (
     <div
@@ -325,7 +331,9 @@ function WorkbenchRow({
       >
         <span className="shell-ch-avatar" data-live={live}>
           {workbench.kind === "chat" ? (
-            <CorbitAvatar size="sm" ariaLabel={displayTitle} />
+            <span aria-hidden="true">
+              <CorbitAvatar size="sm" ariaLabel={displayTitle} />
+            </span>
           ) : (
             <span className="shell-ch-initial" aria-hidden="true">
               {displayTitle.slice(0, 1).toUpperCase()}
@@ -334,20 +342,21 @@ function WorkbenchRow({
           {live === "working" ? (
             <span
               className="shell-ch-orbit"
-              role="img"
-              aria-label="Agent working"
+              aria-hidden="true"
               title="Agent working"
             />
           ) : live === "reply-ready" ? (
             <span
               className="shell-ch-completion"
-              role="img"
-              aria-label="Reply ready"
+              aria-hidden="true"
               title="Reply ready"
             >
               <Check aria-hidden="true" />
             </span>
           ) : null}
+          <span className="sr-only" aria-live="polite" aria-atomic="true">
+            {liveLabel}
+          </span>
         </span>
         <span className="shell-ch-meta">
           <span className="shell-ch-name-row">
@@ -373,7 +382,9 @@ function WorkbenchRow({
             <span className="shell-ch-time">{time}</span>
           ) : null}
           {hasUnread && live !== "reply-ready" ? (
-            <Badge tone="accent">{unread}</Badge>
+            <Badge tone="accent" className="shell-ch-unread-badge">
+              {unread}
+            </Badge>
           ) : null}
         </span>
       </button>

apps/web/test/workbench-list.test.tsx

@@ -230,17 +230,36 @@ describe("WorkbenchList avatar activity", () => {
       });
       const el = await mount();
       const avatar = el.querySelector(".shell-ch-avatar");
-      expect(avatar?.querySelector('[data-corbit="true"]')).not.toBeNull();
+      const corbit = avatar?.querySelector('[data-corbit="true"]');
+      expect(corbit).not.toBeNull();
+      expect(corbit?.parentElement?.getAttribute("aria-hidden")).toBe("true");
       expect(el.querySelector(".shell-ch-preview")?.textContent).toBe(
         "Here is the revised draft.",
       );
       expect(el.querySelector(".shell-ch-live")).toBeNull();
-      expect(
-        avatar?.querySelector('[aria-label="Agent working"]') !== null,
-      ).toBe(activity === "working");
-      expect(avatar?.querySelector('[aria-label="Reply ready"]') !== null).toBe(
-        activity === "reply-ready",
+      expect(avatar?.querySelector('[aria-live="polite"]')?.textContent).toBe(
+        activity === "working"
+          ? "Agent working"
+          : activity === "reply-ready"
+            ? "Reply ready"
+            : "",
       );
+      if (activity === "working") {
+        expect(avatar?.querySelector(".shell-ch-orbit")).not.toBeNull();
+      } else {
+        expect(avatar?.querySelector(".shell-ch-orbit")).toBeNull();
+      }
+      if (activity === "reply-ready") {
+        expect(avatar?.querySelector(".shell-ch-completion")).not.toBeNull();
+      } else {
+        expect(avatar?.querySelector(".shell-ch-completion")).toBeNull();
+      }
+      const unreadBadge = el.querySelector(".shell-ch-unread-badge");
+      if (activity === "reply-ready") {
+        expect(unreadBadge).toBeNull();
+      } else {
+        expect(unreadBadge?.textContent).toBe("1");
+      }
     });
   }
 });