From 2ff15a38a82d813b9b22c8b7c77c1b10ad1a8df0 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Thu, 23 Apr 2026 23:20:52 +0000
Subject: [PATCH] fix(canvas/a11y): add type="button" to ConfirmDialog,
 AuditTrailPanel, DeleteCascadeConfirmDialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WCAG 4.1.2 / bug #1669 follow-up — buttons without explicit type="button"
default to type="submit", which triggers accidental form submission when
the button is rendered inside a <form> element.

Added type="button" to all action buttons in:
- ConfirmDialog.tsx: Cancel + confirm buttons (lines 123, 130)
- DeleteCascadeConfirmDialog.tsx: Cancel + Delete All buttons (lines 145, 151)
- AuditTrailPanel.tsx: filter buttons, refresh, load-more (lines 140, 154, 194)

All 51 component tests pass (5 ConfirmDialog, 46 AuditTrailPanel+DeleteCascadeConfirmDialog).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/AuditTrailPanel.tsx            | 3 +++
 canvas/src/components/ConfirmDialog.tsx              | 2 ++
 canvas/src/components/DeleteCascadeConfirmDialog.tsx | 2 ++
 3 files changed, 7 insertions(+)

diff --git a/canvas/src/components/AuditTrailPanel.tsx b/canvas/src/components/AuditTrailPanel.tsx
index f7056dbe..b38b8fad 100644
--- a/canvas/src/components/AuditTrailPanel.tsx
+++ b/canvas/src/components/AuditTrailPanel.tsx
@@ -138,6 +138,7 @@ export function AuditTrailPanel({ workspaceId }: Props) {
       <div className="px-4 py-2.5 border-b border-zinc-800/40 flex items-center gap-1 overflow-x-auto shrink-0">
         {FILTERS.map((f) => (
           <button
+            type="button"
             key={f.id}
             onClick={() => setFilter(f.id)}
             aria-pressed={filter === f.id}
@@ -152,6 +153,7 @@ export function AuditTrailPanel({ workspaceId }: Props) {
         ))}
         <div className="flex-1" />
         <button
+          type="button"
           onClick={loadEntries}
           className="px-2 py-1 text-[10px] bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded transition-colors shrink-0"
           aria-label="Refresh audit trail"
@@ -190,6 +192,7 @@ export function AuditTrailPanel({ workspaceId }: Props) {
             {cursor && (
               <div className="mt-4 flex justify-center">
                 <button
+                  type="button"
                   onClick={loadMore}
                   disabled={loadingMore}
                   className="px-4 py-2 text-[11px] bg-zinc-800 hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed text-zinc-300 rounded-lg transition-colors"
diff --git a/canvas/src/components/ConfirmDialog.tsx b/canvas/src/components/ConfirmDialog.tsx
index 14464964..59cd2497 100644
--- a/canvas/src/components/ConfirmDialog.tsx
+++ b/canvas/src/components/ConfirmDialog.tsx
@@ -121,6 +121,7 @@ export function ConfirmDialog({
         <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-zinc-800 bg-zinc-950/50">
           {!singleButton && (
             <button
+              type="button"
               onClick={onCancel}
               className="px-3.5 py-1.5 text-[13px] text-zinc-400 hover:text-zinc-200 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-lg transition-colors"
             >
@@ -128,6 +129,7 @@ export function ConfirmDialog({
             </button>
           )}
           <button
+            type="button"
             onClick={onConfirm}
             className={`px-3.5 py-1.5 text-[13px] rounded-lg transition-colors ${confirmColors}`}
           >
diff --git a/canvas/src/components/DeleteCascadeConfirmDialog.tsx b/canvas/src/components/DeleteCascadeConfirmDialog.tsx
index 173cb49e..73af5bf7 100644
--- a/canvas/src/components/DeleteCascadeConfirmDialog.tsx
+++ b/canvas/src/components/DeleteCascadeConfirmDialog.tsx
@@ -143,12 +143,14 @@ export function DeleteCascadeConfirmDialog({
 
         <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-zinc-800 bg-zinc-950/50">
           <button
+            type="button"
             onClick={onCancel}
             className="px-3.5 py-1.5 text-[13px] text-zinc-400 hover:text-zinc-200 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-lg transition-colors"
           >
             Cancel
           </button>
           <button
+            type="button"
             onClick={onConfirm}
             disabled={!checked}
             className={`px-3.5 py-1.5 text-[13px] rounded-lg transition-colors