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 />}