From fab80b5b38d22a4ba9e8d07cda2a93da5920217a Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Sun, 10 May 2026 18:57:34 +0000
Subject: [PATCH] fix(canvas): upgrade weak opacity focus rings on Legend,
 OnboardingWizard, TermsGate

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/Legend.tsx           | 4 ++--
 canvas/src/components/OnboardingWizard.tsx | 2 +-
 canvas/src/components/TermsGate.tsx        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/canvas/src/components/Legend.tsx b/canvas/src/components/Legend.tsx
index 828e8073..bd2fcef3 100644
--- a/canvas/src/components/Legend.tsx
+++ b/canvas/src/components/Legend.tsx
@@ -77,7 +77,7 @@ export function Legend() {
         onClick={openLegend}
         aria-label="Show legend"
         title="Show legend"
-        className={`fixed bottom-6 ${leftClass} z-30 flex items-center gap-1.5 rounded-full bg-surface-sunken/95 border border-line/50 px-3 py-1.5 text-[11px] font-semibold text-ink-mid uppercase tracking-wider shadow-xl shadow-black/30 backdrop-blur-sm hover:text-ink hover:border-line focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition-[left,colors] duration-200`}
+        className={`fixed bottom-6 ${leftClass} z-30 flex items-center gap-1.5 rounded-full bg-surface-sunken/95 border border-line/50 px-3 py-1.5 text-[11px] font-semibold text-ink-mid uppercase tracking-wider shadow-xl shadow-black/30 backdrop-blur-sm hover:text-ink hover:border-line focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition-[left,colors] duration-200`}
       >
         <span aria-hidden="true" className="text-[10px]">ⓘ</span>
         Legend
@@ -100,7 +100,7 @@ export function Legend() {
           // 24×24 touch target (was ~10×16, well under WCAG 2.5.5 min).
           // Negative margin keeps the visual position the same as before
           // — only the hit area + focus ring are larger.
-          className="-mt-1.5 -mr-1.5 w-6 h-6 inline-flex items-center justify-center rounded text-[14px] leading-none text-ink-mid hover:text-ink hover:bg-surface-card/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 transition-colors"
+          className="-mt-1.5 -mr-1.5 w-6 h-6 inline-flex items-center justify-center rounded text-[14px] leading-none text-ink-mid hover:text-ink hover:bg-surface-card/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 transition-colors"
         >
           ×
         </button>
diff --git a/canvas/src/components/OnboardingWizard.tsx b/canvas/src/components/OnboardingWizard.tsx
index b513636b..5485f5b7 100644
--- a/canvas/src/components/OnboardingWizard.tsx
+++ b/canvas/src/components/OnboardingWizard.tsx
@@ -210,7 +210,7 @@ export function OnboardingWizard() {
               // Was hover:bg-surface-card on top of bg-surface-card —
               // silent no-op hover. Lift to surface-elevated, matching
               // the Cancel pattern in ConfirmDialog.
-              className="px-3 py-1.5 bg-surface-card hover:bg-surface-elevated hover:text-ink rounded-lg text-[11px] text-ink-mid transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken"
+              className="px-3 py-1.5 bg-surface-card hover:bg-surface-elevated hover:text-ink rounded-lg text-[11px] text-ink-mid transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
             >
               Next
             </button>
diff --git a/canvas/src/components/TermsGate.tsx b/canvas/src/components/TermsGate.tsx
index 6fc2d358..d88bf806 100644
--- a/canvas/src/components/TermsGate.tsx
+++ b/canvas/src/components/TermsGate.tsx
@@ -138,7 +138,7 @@ export function TermsGate({ children }: { children: React.ReactNode }) {
                 // Hover goes DARKER, not lighter — emerald-500 on white
                 // text drops contrast below AA vs emerald-700. Same trap
                 // I fixed in ApprovalBanner + ConfirmDialog.
-                className="rounded bg-emerald-600 hover:bg-emerald-700 px-4 py-2 text-sm font-medium text-white disabled:opacity-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken"
+                className="rounded bg-emerald-600 hover:bg-emerald-700 px-4 py-2 text-sm font-medium text-white disabled:opacity-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken"
               >
                 {submitting ? "Saving…" : "I agree"}
               </button>