molecule-ai/molecule-core
41
0
Fork 2
Code Issues 103 Pull Requests 145 Actions 138 Packages Projects Releases Wiki Activity

fix(canvas): add WCAG 2.4.7 focus-visible to ActivityTab filter and action buttons

Browse Source 
- Filter chips: add focus-visible:ring-2 for keyboard navigation
- Auto-refresh toggle: add focus-visible:ring-2
- Full Trace button: add focus-visible:ring-2 + transition-colors

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-16 20:12:44 +00:00
parent b510b4fd69
commit 542ab9d40e
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
canvas/src/components/tabs/ActivityTab.tsx
View File

@ -139,7 +139,7 @@ export function ActivityTab({ workspaceId }: Props) {
key={f.id}
onClick={() => setFilter(f.id)}
aria-pressed={filter === f.id}
className={`px-2 py-1 text-[11px] rounded-md font-medium transition-all ${
className={`px-2 py-1 text-[11px] rounded-md font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-1 ${
filter === f.id
? "bg-surface-card text-ink ring-1 ring-zinc-600"
: "text-ink-mid hover:text-ink-mid hover:bg-surface-card/60"
@ -152,7 +152,7 @@ export function ActivityTab({ workspaceId }: Props) {
<button
onClick={() => setAutoRefresh(!autoRefresh)}
aria-pressed={autoRefresh}
className={`text-[11px] px-1.5 py-0.5 rounded ${
className={`text-[11px] px-1.5 py-0.5 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-1 ${
autoRefresh ? "text-good bg-emerald-950/30" : "text-ink-mid"
}`}
title={autoRefresh ? "Auto-refresh ON" : "Auto-refresh OFF"}
@ -161,7 +161,7 @@ export function ActivityTab({ workspaceId }: Props) {
</button>
<button
onClick={() => setTraceOpen(true)}
className="px-2 py-1 bg-blue-900/40 hover:bg-blue-800/50 text-[11px] rounded text-accent border border-blue-800/30"
className="px-2 py-1 bg-blue-900/40 hover:bg-blue-800/50 text-[11px] rounded text-accent border border-blue-800/30 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1"
title="View full conversation trace across all workspaces"
>
Full Trace