From fe3be1fa8c27b69fe4e6dbcb62f619366a84e663 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Sun, 10 May 2026 16:40:02 +0000
Subject: [PATCH] fix(canvas): add focus-visible rings to ThemeToggle,
 RevealToggle, ErrorBoundary, ConversationTraceModal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WCAG 2.4.7 — Focus Visible (Two-level Keyboard Navigation).

ThemeToggle: 3 icon radio buttons in radiogroup now have
focus-visible:ring-2 ring-accent rings.

RevealToggle: eye/eye-off icon button now has focus-visible ring.

ErrorBoundary: Reload and Report buttons now have focus-visible rings.

ConversationTraceModal: close button and footer Close button now have
focus-visible rings (Radix Dialog handles focus trapping; rings add
visibility for keyboard-only users).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/ConversationTraceModal.tsx | 4 ++--
 canvas/src/components/ErrorBoundary.tsx          | 4 ++--
 canvas/src/components/ThemeToggle.tsx            | 2 +-
 canvas/src/components/ui/RevealToggle.tsx        | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/canvas/src/components/ConversationTraceModal.tsx b/canvas/src/components/ConversationTraceModal.tsx
index 63afe664..4bf3a9d4 100644
--- a/canvas/src/components/ConversationTraceModal.tsx
+++ b/canvas/src/components/ConversationTraceModal.tsx
@@ -115,7 +115,7 @@ export function ConversationTraceModal({ open, workspaceId: _workspaceId, onClos
                 <button
                   type="button"
                   aria-label="Close conversation trace"
-                  className="text-ink-mid hover:text-ink-mid text-lg px-2"
+                  className="text-ink-mid hover:text-ink-mid text-lg px-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
                 >
                   ✕
                 </button>
@@ -286,7 +286,7 @@ export function ConversationTraceModal({ open, workspaceId: _workspaceId, onClos
               <Dialog.Close asChild>
                 <button
                   type="button"
-                  className="px-4 py-1.5 text-[12px] bg-surface-card hover:bg-surface-card text-ink-mid rounded-lg transition-colors"
+                  className="px-4 py-1.5 text-[12px] bg-surface-card hover:bg-surface-card text-ink-mid rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
                 >
                   Close
                 </button>
diff --git a/canvas/src/components/ErrorBoundary.tsx b/canvas/src/components/ErrorBoundary.tsx
index 5925b135..bdbf6a98 100644
--- a/canvas/src/components/ErrorBoundary.tsx
+++ b/canvas/src/components/ErrorBoundary.tsx
@@ -83,7 +83,7 @@ export class ErrorBoundary extends React.Component<
               <button
                 type="button"
                 onClick={this.handleReload}
-                className="rounded-lg bg-accent-strong hover:bg-accent px-5 py-2 text-sm font-medium text-white transition-colors"
+                className="rounded-lg bg-accent-strong hover:bg-accent px-5 py-2 text-sm font-medium text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
               >
                 Reload
               </button>
@@ -93,7 +93,7 @@ export class ErrorBoundary extends React.Component<
                   e.preventDefault();
                   this.handleReport();
                 }}
-                className="rounded-lg border border-line hover:border-line px-5 py-2 text-sm font-medium text-ink-mid hover:text-ink transition-colors"
+                className="rounded-lg border border-line hover:border-line px-5 py-2 text-sm font-medium text-ink-mid hover:text-ink transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
               >
                 Report
               </a>
diff --git a/canvas/src/components/ThemeToggle.tsx b/canvas/src/components/ThemeToggle.tsx
index c99519b8..a9dd8d72 100644
--- a/canvas/src/components/ThemeToggle.tsx
+++ b/canvas/src/components/ThemeToggle.tsx
@@ -54,7 +54,7 @@ export function ThemeToggle({ className = "" }: { className?: string }) {
             aria-label={opt.label}
             onClick={() => setTheme(opt.value)}
             className={
-              "flex h-6 w-6 items-center justify-center rounded transition-colors " +
+              "flex h-6 w-6 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface " +
               (active
                 ? "bg-surface-elevated text-ink shadow-sm"
                 : "text-ink-mid hover:text-ink-mid")
diff --git a/canvas/src/components/ui/RevealToggle.tsx b/canvas/src/components/ui/RevealToggle.tsx
index 95ba5360..935d4c05 100644
--- a/canvas/src/components/ui/RevealToggle.tsx
+++ b/canvas/src/components/ui/RevealToggle.tsx
@@ -20,7 +20,7 @@ export function RevealToggle({
       type="button"
       onClick={onToggle}
       aria-label={label}
-      className="reveal-toggle"
+      className="reveal-toggle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
       title={revealed ? 'Hide value' : 'Show value'}
     >
       {revealed ? <EyeOffIcon /> : <EyeIcon />}