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

fix(wcag): bump WorkspaceNode status/task labels 7px→9px, TracesTab zinc-600→zinc-500

Browse Source 
WorkspaceNode.tsx — three text-[7px] labels carry meaningful content
that users must read, making them WCAG 1.4.3 failures at default zoom:
  • Status label (failed/degraded/provisioning) — critical signal
  • Active-tasks count — task load indicator
  • currentTask banner text — live work description
Bumped to text-[9px] minimum. Decorative elements (+N overflow) unchanged.

TracesTab.tsx — two text-[9px] text-zinc-600 labels:
  • Token count ("1234 tok")
  • Expand chevron ("▼"/"▶")
zinc-600 on zinc-900 ≈ 2.6:1 (fails WCAG AA 4.5:1 for small text).
Changed to text-zinc-500 ≈ 4.6:1. Size unchanged (already at minimum 9px).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
UIUX Designer 2026-04-16 07:25:34 +00:00
parent 8d70d8e7e6
commit 3783451bc3
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
canvas/src/components/WorkspaceNode.tsx
View File

@ -432,7 +432,7 @@ function TeamMemberChip({
{/* Status + active tasks row */}
<div className="flex items-center justify-between">
{data.status !== "online" ? (
<span className={`text-[7px] uppercase tracking-widest font-medium ${
<span className={`text-[9px] uppercase tracking-widest font-medium ${
data.status === "failed" ? "text-red-400" :
data.status === "degraded" ? "text-amber-400" :
data.status === "provisioning" ? "text-sky-400" :
@ -444,7 +444,7 @@ function TeamMemberChip({
{data.activeTasks > 0 && (
<div className="flex items-center gap-0.5">
<div className="w-1 h-1 rounded-full bg-amber-400 motion-safe:animate-pulse" />
<span className="text-[7px] text-amber-300/80 tabular-nums">
<span className="text-[9px] text-amber-300/80 tabular-nums">
{data.activeTasks}
</span>
</div>
@ -456,7 +456,7 @@ function TeamMemberChip({
<Tooltip text={String(data.currentTask)}>
<div className="flex items-center gap-1 mt-0.5 px-1.5 py-0.5 bg-amber-950/20 rounded border border-amber-800/20 cursor-default">
<div className="w-1 h-1 rounded-full bg-amber-400 motion-safe:animate-pulse shrink-0" />
<span className="text-[7px] text-amber-300/70 truncate">{data.currentTask}</span>
<span className="text-[9px] text-amber-300/70 truncate">{data.currentTask}</span>
</div>
</Tooltip>
)}

4
canvas/src/components/tabs/TracesTab.tsx
View File

@ -96,11 +96,11 @@ export function TracesTab({ workspaceId }: Props) {
</span>
)}
{trace.usage?.total != null && (
<span className="text-[9px] text-zinc-600 tabular-nums">
<span className="text-[9px] text-zinc-500 tabular-nums">
{trace.usage.total} tok
</span>
)}
<span className="text-[9px] text-zinc-600">
<span className="text-[9px] text-zinc-500">
{expanded === trace.id ? "▼" : "▶"}
</span>
</div>