🎨 Palette: EditEdgeModal 키보드 접근성 개선 (Enter 키 제출 지원)

.Jules/palette.md

@@ -43,3 +43,6 @@
 ## 2024-06-26 - [Abbreviation Comprehension in ERD Nodes]
 **Learning:** Users without deep database administration backgrounds may not immediately recognize domain-specific abbreviations like "PK" or "FK" rendered as minimalist badges inside dense ERD nodes.
 **Action:** Always provide `title` attributes on technical acronym badges (like Primary Key / Foreign Key) to ensure clarity and improve accessibility without cluttering the space-constrained node UI.
+## 2023-07-04 - Native Form Submission for Modals
+**Learning:** React flow properties and components often lack default native form interactions. Converting modal contents strictly to `<form>` tags rather than `<div>` allows "Enter" key submissions, significantly increasing accessibility and UX.
+**Action:** Always wrap interactive input and button groups in a `<form>` component and ensure the submit action is bounded natively, especially for data entries and edits in overlays.

frontend/src/components/modals/EditEdgeModal.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { EditEdgeModal } from "./EditEdgeModal";
+
+describe("EditEdgeModal", () => {
+  it("submits the form natively with enter key", () => {
+    const onRelSubmit = vi.fn();
+    const setRelLabel = vi.fn();
+
+    render(
+      <EditEdgeModal
+        editingEdge={{ id: "e1", source: "A", target: "B" }}
+        relLabel=""
+        setRelLabel={setRelLabel}
+        onRelDelete={vi.fn()}
+        onRelCancel={vi.fn()}
+        onRelSubmit={onRelSubmit}
+      />
+    );
+
+    const input = screen.getByLabelText("제약조건 이름 (Label)");
+    fireEvent.change(input, { target: { value: "my_label" } });
+
+    // Test that the input update was called
+    expect(setRelLabel).toHaveBeenCalledWith("my_label");
+
+    // Native submit via Enter on the form
+    fireEvent.submit(screen.getByRole("dialog"));
+
+    expect(onRelSubmit).toHaveBeenCalled();
+  });
+
+  it("does not render when editingEdge is null", () => {
+    const { container } = render(
+      <EditEdgeModal
+        editingEdge={null}
+        relLabel=""
+        setRelLabel={vi.fn()}
+        onRelDelete={vi.fn()}
+        onRelCancel={vi.fn()}
+        onRelSubmit={vi.fn()}
+      />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

frontend/src/components/modals/EditEdgeModal.tsx

@@ -19,7 +19,7 @@ export function EditEdgeModal({
   onRelCancel,
   onRelSubmit,
 }: EditEdgeModalProps) {
-  const dialogRef = useDialogAccessibility(Boolean(editingEdge), onRelCancel);
+  const dialogRef = useDialogAccessibility<HTMLFormElement>(Boolean(editingEdge), onRelCancel);
 
   if (!editingEdge) return null;
 
@@ -39,13 +39,17 @@ export function EditEdgeModal({
         justifyContent: "center",
       }}
     >
-      <div
+      <form
         className="modalContent"
         role="dialog"
         aria-modal="true"
         aria-labelledby="edit-rel-title"
         ref={dialogRef}
         tabIndex={-1}
+        onSubmit={(e) => {
+          e.preventDefault();
+          onRelSubmit();
+        }}
         style={{
           background: "#fff",
           padding: 20,
@@ -85,15 +89,14 @@ export function EditEdgeModal({
           <div className="row">
             <button type="button" onClick={onRelCancel}>취소</button>
             <button
-              type="button"
-              onClick={onRelSubmit}
+              type="submit"
               style={{ background: "#034ea2", color: "#fff" }}
             >
               저장
             </button>
           </div>
         </div>
-      </div>
+      </form>
     </div>
   );
 }