From 0ce7670bf7dc429b0989fd59f6458fc4ae5bd7fd Mon Sep 17 00:00:00 2001
From: Molecule AI Frontend Engineer <frontend-engineer@agents.moleculesai.app>
Date: Fri, 17 Apr 2026 21:17:05 +0000
Subject: [PATCH] fix(canvas): add aria-label to Toolbar buttons and status
 pills

NVDA and other screen readers ignore the title attribute on interactive
elements and non-interactive divs. Add aria-label alongside title on:
- Stop All button (dynamic label reflects active task count)
- Restart All button (dynamic label reflects pending workspace count)
- StatusPill component (online/offline/failed/provisioning counts)
- WsStatusPill component (connected/connecting/disconnected variants)

Inner dot and text spans get aria-hidden="true" so the screen reader
reads the single aria-label rather than individual child nodes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/Toolbar.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/canvas/src/components/Toolbar.tsx b/canvas/src/components/Toolbar.tsx
index a4273a05..63684204 100644
--- a/canvas/src/components/Toolbar.tsx
+++ b/canvas/src/components/Toolbar.tsx
@@ -157,6 +157,7 @@ export function Toolbar() {
           disabled={stopping}
           className="flex items-center gap-1.5 px-2.5 py-1 bg-red-950/50 hover:bg-red-900/60 border border-red-800/40 rounded-lg transition-colors disabled:opacity-50"
           title={`Stop all running tasks (${counts.activeTasks} active)`}
+          aria-label={stopping ? "Stopping all running tasks" : `Stop all running tasks (${counts.activeTasks} active)`}
         >
           <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor" className="text-red-400">
             <rect x="2" y="2" width="12" height="12" rx="2" />
@@ -174,6 +175,7 @@ export function Toolbar() {
           disabled={restartingAll}
           className="flex items-center gap-1.5 px-2.5 py-1 bg-amber-950/40 hover:bg-amber-900/50 border border-amber-800/40 rounded-lg transition-colors disabled:opacity-50"
           title={`Restart ${needsRestartNodes.length} workspace${needsRestartNodes.length === 1 ? "" : "s"} that need to pick up config or secret changes`}
+          aria-label={restartingAll ? "Restarting workspaces" : `Restart ${needsRestartNodes.length} workspace${needsRestartNodes.length === 1 ? "" : "s"} pending config or secret changes`}
         >
           <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" className="text-amber-400">
             <path d="M2 8a6 6 0 1 1 1.76 4.24M2 13v-3h3" strokeLinecap="round" strokeLinejoin="round" />
@@ -315,9 +317,9 @@ export function Toolbar() {
 
 function StatusPill({ color, count, label }: { color: string; count: number; label: string }) {
   return (
-    <div className="flex items-center gap-1.5" title={`${count} ${label}`}>
-      <div className={`w-1.5 h-1.5 rounded-full ${color}`} />
-      <span className="text-[10px] text-zinc-400 tabular-nums">{count}</span>
+    <div className="flex items-center gap-1.5" title={`${count} ${label}`} aria-label={`${count} ${label}`}>
+      <div className={`w-1.5 h-1.5 rounded-full ${color}`} aria-hidden="true" />
+      <span className="text-[10px] text-zinc-400 tabular-nums" aria-hidden="true">{count}</span>
     </div>
   );
 }
@@ -325,24 +327,24 @@ function StatusPill({ color, count, label }: { color: string; count: number; lab
 function WsStatusPill({ status }: { status: "connected" | "connecting" | "disconnected" }) {
   if (status === "connected") {
     return (
-      <div className="flex items-center gap-1.5" title="Real-time updates: connected">
-        <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("online")}`} />
-        <span className="text-[10px] text-zinc-500">Live</span>
+      <div className="flex items-center gap-1.5" title="Real-time updates: connected" aria-label="Real-time updates: connected">
+        <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("online")}`} aria-hidden="true" />
+        <span className="text-[10px] text-zinc-500" aria-hidden="true">Live</span>
       </div>
     );
   }
   if (status === "connecting") {
     return (
-      <div className="flex items-center gap-1.5" title="Real-time updates: reconnecting…">
-        <div className="w-1.5 h-1.5 rounded-full bg-amber-400 motion-safe:animate-pulse" />
-        <span className="text-[10px] text-zinc-500">Reconnecting</span>
+      <div className="flex items-center gap-1.5" title="Real-time updates: reconnecting…" aria-label="Real-time updates: reconnecting">
+        <div className="w-1.5 h-1.5 rounded-full bg-amber-400 motion-safe:animate-pulse" aria-hidden="true" />
+        <span className="text-[10px] text-zinc-500" aria-hidden="true">Reconnecting</span>
       </div>
     );
   }
   return (
-    <div className="flex items-center gap-1.5" title="Real-time updates: disconnected">
-      <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("failed")}`} />
-      <span className="text-[10px] text-zinc-500">Offline</span>
+    <div className="flex items-center gap-1.5" title="Real-time updates: disconnected" aria-label="Real-time updates: disconnected">
+      <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("failed")}`} aria-hidden="true" />
+      <span className="text-[10px] text-zinc-500" aria-hidden="true">Offline</span>
     </div>
   );
 }