From 32a3b8414767a5f13a00d756d561b46922c52f90 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Thu, 23 Apr 2026 23:24:47 +0000
Subject: [PATCH] fix(canvas/a11y): add type="button" to MissingKeysModal,
 ContextMenu, CreateWorkspaceDialog tier radio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WCAG 4.1.2 / bug #1669 follow-up — modal + menu buttons need explicit type="button".

- MissingKeysModal.tsx: Save, Open Settings Panel, Cancel Deploy, Add Keys+Deploy (4)
- ContextMenu.tsx: all menuitem buttons (1 — inner menu items loop)
- CreateWorkspaceDialog.tsx: tier radio buttons in dialog (1)

56 vitest tests pass.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/ContextMenu.tsx           | 1 +
 canvas/src/components/CreateWorkspaceDialog.tsx | 1 +
 canvas/src/components/MissingKeysModal.tsx      | 4 ++++
 3 files changed, 6 insertions(+)

diff --git a/canvas/src/components/ContextMenu.tsx b/canvas/src/components/ContextMenu.tsx
index 475e8319..7a376255 100644
--- a/canvas/src/components/ContextMenu.tsx
+++ b/canvas/src/components/ContextMenu.tsx
@@ -308,6 +308,7 @@ export function ContextMenu() {
         }
         return (
           <button
+            type="button"
             key={i}
             role="menuitem"
             onClick={item.action}
diff --git a/canvas/src/components/CreateWorkspaceDialog.tsx b/canvas/src/components/CreateWorkspaceDialog.tsx
index d8ba3694..9819fd52 100644
--- a/canvas/src/components/CreateWorkspaceDialog.tsx
+++ b/canvas/src/components/CreateWorkspaceDialog.tsx
@@ -284,6 +284,7 @@ export function CreateWorkspaceButton() {
                 </div>
                 {TIERS.map((t, idx) => (
                   <button
+                    type="button"
                     key={t.value}
                     ref={(el) => { radioRefs.current[idx] = el; }}
                     role="radio"
diff --git a/canvas/src/components/MissingKeysModal.tsx b/canvas/src/components/MissingKeysModal.tsx
index e6712177..e80ab58a 100644
--- a/canvas/src/components/MissingKeysModal.tsx
+++ b/canvas/src/components/MissingKeysModal.tsx
@@ -556,6 +556,7 @@ function AllKeysModal({
                     className="flex-1 bg-zinc-900 border border-zinc-600 rounded px-2 py-1.5 text-[11px] text-zinc-100 font-mono focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/20 transition-colors"
                   />
                   <button
+                    type="button"
                     onClick={() => handleSaveKey(index)}
                     disabled={!entry.value.trim() || entry.saving}
                     className="px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-[11px] rounded text-white disabled:opacity-30 transition-colors shrink-0"
@@ -580,6 +581,7 @@ function AllKeysModal({
           <div>
             {onOpenSettings && (
               <button
+                type="button"
                 onClick={onOpenSettings}
                 className="text-[11px] text-blue-400 hover:text-blue-300 transition-colors"
               >
@@ -589,12 +591,14 @@ function AllKeysModal({
           </div>
           <div className="flex items-center gap-2">
             <button
+              type="button"
               onClick={onCancel}
               className="px-3.5 py-1.5 text-[12px] text-zinc-400 hover:text-zinc-200 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-lg transition-colors"
             >
               Cancel Deploy
             </button>
             <button
+              type="button"
               onClick={handleAddKeysAndDeploy}
               disabled={!allSaved || anySaving}
               className="px-3.5 py-1.5 text-[12px] bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors disabled:opacity-40"