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

fix(canvas): add WCAG 2.4.7 focus-visible to ChannelsTab action buttons

Browse Source 
- Manual input toggle: add focus-visible:ring-2
- Test channel button: add focus-visible:ring-2
- Channel toggle On/Off: add focus-visible:ring-2
- Remove channel button: add focus-visible:ring-2

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

12
canvas/src/components/tabs/ChannelsTab.tsx
View File

@ -242,7 +242,9 @@ export function ChannelsTab({ workspaceId }: Props) {
if (loading) {
return (
<div className="p-4 text-ink-mid text-xs">Loading channels...</div>
<div className="p-4 text-ink-mid text-xs" aria-live="polite" aria-label="Loading channels">
Loading channels...
</div>
);
}
@ -332,7 +334,7 @@ export function ChannelsTab({ workspaceId }: Props) {
))}
<button
onClick={() => setShowManualInput(!showManualInput)}
className="text-[10px] text-accent hover:underline"
className="text-[10px] text-accent hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
{showManualInput ? "hide manual input" : "edit manually"}
</button>
@ -410,13 +412,13 @@ export function ChannelsTab({ workspaceId }: Props) {
<button
onClick={() => handleTest(ch)}
disabled={testing === ch.id}
className="text-[10px] px-2 py-0.5 rounded bg-surface-card/50 text-ink-mid hover:text-ink transition disabled:opacity-50"
className="text-[10px] px-2 py-0.5 rounded bg-surface-card/50 text-ink-mid hover:text-ink transition disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
{testing === ch.id ? "Sent!" : "Test"}
</button>
<button
onClick={() => handleToggle(ch)}
className={`text-[10px] px-2 py-0.5 rounded transition ${
className={`text-[10px] px-2 py-0.5 rounded transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 ${
ch.enabled
? "bg-emerald-900/30 text-good hover:bg-emerald-900/50"
: "bg-surface-card/50 text-ink-mid hover:text-ink-mid"
@ -426,7 +428,7 @@ export function ChannelsTab({ workspaceId }: Props) {
</button>
<button
onClick={() => setPendingDelete(ch)}
className="text-[10px] px-2 py-0.5 rounded bg-red-900/20 text-bad hover:bg-red-900/40 transition"
className="text-[10px] px-2 py-0.5 rounded bg-red-900/20 text-bad hover:bg-red-900/40 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-1"
>
Remove
</button>