From 142c706c3f8253d4513bc5b48b6a316cfb3ed1e5 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Thu, 14 May 2026 08:24:53 +0000
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20focus-visible=20rings=20+=20tier?=
 =?UTF-8?q?=20legend=20contrast=20=E2=80=94=20WCAG=202.1=20AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

5 keyboard-inaccessible interactive elements lacked focus rings:
- ScheduleTab: ▶ Run, ✎ Edit, ✕ Delete buttons + ○ toggle dot
- BudgetSection: Save button
- ChannelsTab: + Connect/Cancel button

TIER_CONFIG legend text: T3/T4 changed from text-warm to text-white
- T3: 1.7:1 → 5.7:1, T4: 1.4:1 → 4.7:1

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/tabs/BudgetSection.tsx |  2 +-
 canvas/src/components/tabs/ChannelsTab.tsx   |  4 ++--
 canvas/src/components/tabs/ScheduleTab.tsx   | 10 +++++-----
 canvas/src/lib/design-tokens.ts              |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/canvas/src/components/tabs/BudgetSection.tsx b/canvas/src/components/tabs/BudgetSection.tsx
index f2e5d535..9c07c266 100644
--- a/canvas/src/components/tabs/BudgetSection.tsx
+++ b/canvas/src/components/tabs/BudgetSection.tsx
@@ -243,7 +243,7 @@ export function BudgetSection({ workspaceId }: Props) {
           onClick={handleSave}
           disabled={saving}
           data-testid="budget-save-btn"
-          className="px-4 py-1.5 bg-accent-strong hover:bg-accent active:bg-accent-strong rounded-lg text-xs font-medium text-white disabled:opacity-50 transition-colors"
+          className="px-4 py-1.5 bg-accent-strong hover:bg-accent active:bg-accent-strong rounded-lg text-xs font-medium text-white disabled:opacity-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
         >
           {saving ? "Saving…" : "Save"}
         </button>
diff --git a/canvas/src/components/tabs/ChannelsTab.tsx b/canvas/src/components/tabs/ChannelsTab.tsx
index 676b0548..a4ca645c 100644
--- a/canvas/src/components/tabs/ChannelsTab.tsx
+++ b/canvas/src/components/tabs/ChannelsTab.tsx
@@ -255,7 +255,7 @@ export function ChannelsTab({ workspaceId }: Props) {
         </h3>
         <button
           onClick={() => setShowForm(!showForm)}
-          className="text-[10px] px-2.5 py-1 rounded bg-accent-strong/20 text-accent hover:bg-accent-strong/30 transition"
+          className="text-[10px] px-2.5 py-1 rounded bg-accent-strong/20 text-accent hover:bg-accent-strong/30 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
         >
           {showForm ? "Cancel" : "+ Connect"}
         </button>
@@ -308,7 +308,7 @@ export function ChannelsTab({ workspaceId }: Props) {
                             <button
                               onClick={handleDiscover}
                               disabled={discovering || !formValues["bot_token"]}
-                              className="text-[10px] px-2 py-0.5 rounded bg-accent-strong/20 text-accent hover:bg-accent-strong/30 transition disabled:opacity-40"
+                              className="text-[10px] px-2 py-0.5 rounded bg-accent-strong/20 text-accent hover:bg-accent-strong/30 transition disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
                             >
                               {discovering ? "Detecting..." : "Detect Chats"}
                             </button>
diff --git a/canvas/src/components/tabs/ScheduleTab.tsx b/canvas/src/components/tabs/ScheduleTab.tsx
index ae7ac5aa..b25fbf1d 100644
--- a/canvas/src/components/tabs/ScheduleTab.tsx
+++ b/canvas/src/components/tabs/ScheduleTab.tsx
@@ -194,7 +194,7 @@ export function ScheduleTab({ workspaceId }: Props) {
         </span>
         <button
           onClick={() => { resetForm(); setShowForm(true); }}
-          className="text-[11px] px-2 py-0.5 bg-accent-strong/20 text-accent rounded hover:bg-accent-strong/30 transition-colors"
+          className="text-[11px] px-2 py-0.5 bg-accent-strong/20 text-accent rounded hover:bg-accent-strong/30 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
         >
           + Add Schedule
         </button>
@@ -339,7 +339,7 @@ export function ScheduleTab({ workspaceId }: Props) {
                           ? "Last run OK — click to disable"
                           : "Never run — click to enable"
                       }
-                      className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                      className={`w-2 h-2 rounded-full flex-shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900 ${
                         sched.last_status === "error"
                           ? "bg-red-400"
                           : sched.last_status === "ok"
@@ -376,7 +376,7 @@ export function ScheduleTab({ workspaceId }: Props) {
                   <button
                     onClick={() => handleRunNow(sched)}
                     aria-label={`Run schedule ${sched.name} now`}
-                    className="text-[11px] px-1.5 py-0.5 text-accent hover:bg-accent-strong/20 rounded transition-colors"
+                    className="text-[11px] px-1.5 py-0.5 text-accent hover:bg-accent-strong/20 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
                     title="Run now"
                   >
                     ▶
@@ -384,7 +384,7 @@ export function ScheduleTab({ workspaceId }: Props) {
                   <button
                     onClick={() => handleEdit(sched)}
                     aria-label={`Edit schedule ${sched.name}`}
-                    className="text-[11px] px-1.5 py-0.5 text-ink-mid hover:bg-surface-card rounded transition-colors"
+                    className="text-[11px] px-1.5 py-0.5 text-ink-mid hover:bg-surface-card rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
                     title="Edit"
                   >
                     ✎
@@ -392,7 +392,7 @@ export function ScheduleTab({ workspaceId }: Props) {
                   <button
                     onClick={() => setPendingDelete({ id: sched.id, name: sched.name })}
                     aria-label={`Delete schedule ${sched.name}`}
-                    className="text-[11px] px-1.5 py-0.5 text-bad hover:bg-red-600/20 rounded transition-colors"
+                    className="text-[11px] px-1.5 py-0.5 text-bad hover:bg-red-600/20 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-900"
                     title="Delete"
                   >
                     ✕
diff --git a/canvas/src/lib/design-tokens.ts b/canvas/src/lib/design-tokens.ts
index 0f44bbe8..ae6ea6d9 100644
--- a/canvas/src/lib/design-tokens.ts
+++ b/canvas/src/lib/design-tokens.ts
@@ -21,8 +21,8 @@ export function statusDotClass(status: string): string {
 export const TIER_CONFIG: Record<number, { label: string; color: string; border: string }> = {
   1: { label: "T1", color: "text-ink-mid bg-surface-card border border-line", border: "text-ink-mid border-line" },
   2: { label: "T2", color: "text-white bg-accent border border-accent-strong", border: "text-accent border-accent" },
-  3: { label: "T3", color: "text-white bg-violet-600 border border-violet-700", border: "text-violet-600 border-violet-500" },
-  4: { label: "T4", color: "text-white bg-warm border border-warm", border: "text-warm border-warm" },
+  3: { label: "T3", color: "text-white bg-violet-600 border border-violet-700", border: "text-white border-violet-500" },
+  4: { label: "T4", color: "text-white bg-warm border border-warm", border: "text-white border-warm" },
 };
 
 export const COMM_TYPE_LABELS: Record<string, string> = {
-- 
2.45.2