molecule-ai/molecule-core
35
0
Fork 2
Code Issues 16 Pull Requests 2 Actions 49 Packages Projects Releases Wiki Activity

fix(canvas): add aria-label to Toolbar buttons and status pills

Browse Source 
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>
This commit is contained in:
Molecule AI Frontend Engineer 2026-04-17 21:17:05 +00:00
parent 6e9ef5f204
commit 0ce7670bf7
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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