From 3886713b6d49ddaf2770769ee2d0bbd96b2a65ff Mon Sep 17 00:00:00 2001
From: Molecule AI Core-FE <core-fe@agents.moleculesai.app>
Date: Mon, 11 May 2026 03:46:35 +0000
Subject: [PATCH] fix(canvas/a11y): expose WsStatusPill status text to screen
 readers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed aria-hidden="true" from the "Live" / "Reconnecting" / "Offline"
text spans and the redundant aria-label from the container div.

Previously the component used aria-label="Real-time updates: connected"
on the outer div with aria-hidden on the inner text — screen readers
announced the label but the visible text was hidden. Now the text
itself is accessible: "Live", "Reconnecting", "Offline" are announced
directly. The decorative dot keeps aria-hidden since it is purely
decorative and the title attribute provides hover tooltip context.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/Toolbar.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/canvas/src/components/Toolbar.tsx b/canvas/src/components/Toolbar.tsx
index 1dab7f36..c9b3f976 100644
--- a/canvas/src/components/Toolbar.tsx
+++ b/canvas/src/components/Toolbar.tsx
@@ -405,24 +405,30 @@ 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" aria-label="Real-time updates: connected">
+      <div className="flex items-center gap-1.5" title="Real-time updates: connected">
+        {/* Decorative dot — not meaningful content for screen readers */}
         <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("online")}`} aria-hidden="true" />
-        <span className="text-[10px] text-ink-mid" aria-hidden="true">Live</span>
+        {/* Status text exposed to screen readers (aria-hidden removed) */}
+        <span className="text-[10px] text-ink-mid">Live</span>
       </div>
     );
   }
   if (status === "connecting") {
     return (
-      <div className="flex items-center gap-1.5" title="Real-time updates: reconnecting…" aria-label="Real-time updates: reconnecting">
+      <div className="flex items-center gap-1.5" title="Real-time updates: reconnecting…">
+        {/* Decorative dot — not meaningful content for screen readers */}
         <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-warm" aria-hidden="true">Reconnecting</span>
+        {/* Status text exposed to screen readers (aria-hidden removed) */}
+        <span className="text-[10px] text-warm">Reconnecting</span>
       </div>
     );
   }
   return (
-    <div className="flex items-center gap-1.5" title="Real-time updates: disconnected" aria-label="Real-time updates: disconnected">
+    <div className="flex items-center gap-1.5" title="Real-time updates: disconnected">
+      {/* Decorative dot — not meaningful content for screen readers */}
       <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("failed")}`} aria-hidden="true" />
-      <span className="text-[10px] text-bad" aria-hidden="true">Offline</span>
+      {/* Status text exposed to screen readers (aria-hidden removed) */}
+      <span className="text-[10px] text-bad">Offline</span>
     </div>
   );
 }