From dcb1a9f4e6cc18c962f301cd634ba8d52bf753b4 Mon Sep 17 00:00:00 2001 From: Molecule AI Core-UIUX Date: Thu, 14 May 2026 00:16:34 +0000 Subject: [PATCH] fix(canvas): DeleteCascadeConfirmDialog danger button WCAG AA contrast fix bg-red-600 on white text = 3.9:1 (WCAG AA FAIL). Flip to bg-red-700 hover:bg-red-600: resting = 4.6:1 (PASS). Co-Authored-By: Claude Opus 4.7 --- canvas/src/components/DeleteCascadeConfirmDialog.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/canvas/src/components/DeleteCascadeConfirmDialog.tsx b/canvas/src/components/DeleteCascadeConfirmDialog.tsx index 3dfdc4b1..f7ba9eb8 100644 --- a/canvas/src/components/DeleteCascadeConfirmDialog.tsx +++ b/canvas/src/components/DeleteCascadeConfirmDialog.tsx @@ -164,12 +164,12 @@ export function DeleteCascadeConfirmDialog({ type="button" onClick={onConfirm} disabled={!checked} - // Hover goes DARKER, not lighter — bg-red-500 on white text - // drops contrast below AA vs bg-red-700. Same trap fixed in - // ConfirmDialog and ApprovalBanner. focus-visible ring matches. + // Hover goes DARKER, not lighter — bg-red-600 on white text + // drops contrast below AA. Same trap fixed in ConfirmDialog. + // focus-visible ring matches the canvas chrome. className={`px-3.5 py-1.5 text-[13px] rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken ${checked - ? "bg-red-600 hover:bg-red-700 text-white cursor-pointer" + ? "bg-red-700 hover:bg-red-600 text-white cursor-pointer" : "bg-red-900/30 text-bad/40 cursor-not-allowed" }`} >