From b5dea3c5df1e7ea59f8abc4417ff87da482d7ac5 Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Sun, 3 May 2026 12:28:24 -0700
Subject: [PATCH] fix(canvas): ConfirmDialog hover + focus polish

Three issues on a high-stakes surface (revoke token, delete workspace,
cascade delete):

1. **Cancel hover was a no-op.** `bg-surface-card hover:bg-surface-card`
   gave zero visual feedback on hover. Now hovers to surface-elevated
   with a softened border so the button visibly lifts.

2. **Confirm hovers went LIGHTER, dropping white-text contrast.**
   `bg-red-600 hover:bg-red-500` made the destructive button less
   readable on hover. Same for warning (amber) and primary (accent).
   Reversed to hover-darker so contrast holds in both themes.

3. **No focus-visible rings on either button.** Keyboard users had no
   indication of focus position (WCAG 2.4.7 fail). Added
   `focus-visible:ring-2 focus-visible:ring-accent/40` on Cancel and
   `focus-visible:ring-2 focus-visible:ring-offset-2 ...accent/60` on
   Confirm so the focused destructive action is unambiguous.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 canvas/src/components/ConfirmDialog.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/canvas/src/components/ConfirmDialog.tsx b/canvas/src/components/ConfirmDialog.tsx
index 93961db4..75cacd70 100644
--- a/canvas/src/components/ConfirmDialog.tsx
+++ b/canvas/src/components/ConfirmDialog.tsx
@@ -91,12 +91,15 @@ export function ConfirmDialog({
 
   if (!open || !mounted) return null;
 
+  // Hover goes DARKER, not lighter — lighter shades on white text drop
+  // contrast below AA on the accent and red ramps. Darker hovers stay
+  // readable in both light and dark themes.
   const confirmColors =
     confirmVariant === "danger"
-      ? "bg-red-600 hover:bg-red-500 text-white"
+      ? "bg-red-600 hover:bg-red-700 text-white"
       : confirmVariant === "warning"
-        ? "bg-amber-600 hover:bg-amber-500 text-white"
-        : "bg-accent-strong hover:bg-accent text-white";
+        ? "bg-amber-600 hover:bg-amber-700 text-white"
+        : "bg-accent hover:bg-accent-strong text-white";
 
   // Render via Portal so the fixed-position dialog escapes any containing block
   // (e.g. parents with transform, filter, will-change that break position:fixed).
@@ -123,7 +126,7 @@ export function ConfirmDialog({
             <button
               type="button"
               onClick={onCancel}
-              className="px-3.5 py-1.5 text-[13px] text-ink-mid hover:text-ink bg-surface-card hover:bg-surface-card border border-line rounded-lg transition-colors"
+              className="px-3.5 py-1.5 text-[13px] text-ink-mid hover:text-ink bg-surface-card hover:bg-surface-elevated border border-line hover:border-line-soft rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
             >
               Cancel
             </button>
@@ -131,7 +134,7 @@ export function ConfirmDialog({
           <button
             type="button"
             onClick={onConfirm}
-            className={`px-3.5 py-1.5 text-[13px] rounded-lg transition-colors ${confirmColors}`}
+            className={`px-3.5 py-1.5 text-[13px] rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken focus-visible:ring-accent/60 ${confirmColors}`}
           >
             {confirmLabel}
           </button>