From 2eb4ba1fbc4885c6b14eeb3553c3fe3315e615b5 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 24 Jul 2026 02:12:21 +0000
Subject: [PATCH] Hello, Jules here! I've implemented the following updates for
 you:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 Palette: [UX improvement] Add form wrappers for native keyboard submission

💡 What: I changed standard `div` wrappers to semantic `<form>` wrappers around 'New Project', 'New Connection', and 'Inline Project Create' field groups in `App.tsx`. I also changed their primary button types from `button` to trigger form submissions.
🎯 Why: To natively allow users to press 'Enter' from within text inputs to trigger the creation/save flows, rather than forcing them to manually click the confirmation button. This resolves a significant keyboard accessibility frustration point.
♿ Accessibility: Enables native, standard implicit form submission flow (keyboard Enter) where it was previously missing.
---
 .Jules/palette.md    |  4 ++++
 frontend/src/App.tsx | 45 ++++++++++++++++++++++++++++++++------------
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7577a1ca7..ff1dd2514 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -56,3 +56,7 @@
 ## 2024-07-14 - Native Keyboard Submission with Forms for Modals
 **Learning:** Modals designed with plain `<div>` elements as wrappers instead of `<form>` lack native keyboard submission support, forcing users to switch from keyboard to mouse to confirm actions like "Save".
 **Action:** When designing modals or popups containing inputs, always use a `<form>` element to wrap the content, handle the `onSubmit` event (calling `e.preventDefault()`), and set the primary confirmation button to `type="submit"` to enable seamless Enter-key submission for keyboard users.
+
+## $(date +%Y-%m-%d) - Native Keyboard Submission Support
+**Learning:** React elements with input fields and an adjacent save/create button (often structured using `div`) prevent users from pressing "Enter" natively to submit.
+**Action:** Replaced semantic container `div` wrappers with `<form onSubmit={...}>` and updated `button type="button"` to `button type="submit"`. Always prefer form wrapping for groups containing inputs and an explicit action button to inherently support standard UX accessibility patterns like keyboard submission.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4d0dc2585..9fe48b2f1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1075,15 +1075,22 @@ export default function App() {
 
         <div className="field">
           <label htmlFor="project-name">New project</label>
-          <div className="row">
+          <form
+            className="row"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (projectName.trim() && !isCreatingProject) {
+                onCreateProject();
+              }
+            }}
+          >
             <input
               id="project-name"
               value={projectName}
               onChange={(e) => setProjectName(e.target.value)}
             />
             <button
-              type="button"
-              onClick={onCreateProject}
+              type="submit"
               disabled={!projectName.trim() || isCreatingProject}
               aria-busy={isCreatingProject}
               aria-describedby={
@@ -1092,7 +1099,7 @@ export default function App() {
             >
               {isCreatingProject ? "Creating…" : "Create"}
             </button>
-          </div>
+          </form>
           {createProjectHint ? (
             <span id="create-project-hint" className="field-hint">
               {createProjectHint}
@@ -1121,7 +1128,15 @@ export default function App() {
           </select>
         </div>
 
-        <div className="field">
+        <form
+          className="field"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (selectedProjectId && connName.trim() && isDsnPresent && !isCreatingConnection) {
+              onCreateConnection();
+            }
+          }}
+        >
           <label htmlFor="conn-name">New connection (DSN)</label>
           <input
             id="conn-name"
@@ -1140,8 +1155,7 @@ export default function App() {
             aria-label="Connection DSN"
           />
           <button
-            type="button"
-            onClick={onCreateConnection}
+            type="submit"
             disabled={
               !selectedProjectId ||
               !connName.trim() ||
@@ -1160,7 +1174,7 @@ export default function App() {
               {createConnectionHint}
             </span>
           ) : null}
-        </div>
+        </form>
 
         <div className="field">
           <label htmlFor="schema-filter">Schema filter (optional)</label>
@@ -1304,20 +1318,27 @@ export default function App() {
                 <h1 id="projects-title">프로젝트</h1>
                 <p>프로젝트를 선택하면 해당 다이어그램 목록을 볼 수 있습니다.</p>
               </div>
-              <div className="inlineCreate">
+              <form
+                className="inlineCreate"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  if (projectName.trim() && !isCreatingProject) {
+                    onCreateProject();
+                  }
+                }}
+              >
                 <input
                   aria-label="새 프로젝트 이름"
                   value={projectName}
                   onChange={(event) => setProjectName(event.currentTarget.value)}
                 />
                 <button
-                  type="button"
-                  onClick={onCreateProject}
+                  type="submit"
                   disabled={!projectName.trim() || isCreatingProject}
                 >
                   {isCreatingProject ? "생성 중" : "새 프로젝트"}
                 </button>
-              </div>
+              </form>
             </div>
             <div className="dataTable" role="table" aria-label="프로젝트 목록">
               <div className="dataTable__row dataTable__row--projects dataTable__row--head" role="row">