molecule-ai/molecule-core
41
0
Fork 2
Code Issues 41 Pull Requests 7 Actions 566 Packages Projects Releases Wiki Activity

fix(canvas): DeleteCascadeConfirmDialog danger button WCAG AA contrast fix

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-14 00:16:34 +00:00 committed by molecule-operator
parent b9f5cbe347
commit dcb1a9f4e6
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
canvas/src/components/DeleteCascadeConfirmDialog.tsx
View File

@ -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"
}`}
>