molecule-ai/molecule-core
41
0
Fork 2
Code Issues 51 Pull Requests 22 Actions 2 Packages Projects Releases Wiki Activity

fix(canvas/a11y): expose WsStatusPill status text to screen readers

Browse Source 
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>
This commit is contained in:
Molecule AI · core-fe 2026-05-11 03:46:35 +00:00
parent 8bd4023f1d
commit 3886713b6d
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
canvas/src/components/Toolbar.tsx
View File

@ -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>
);
}