diff --git a/.Jules/palette.md b/.Jules/palette.md index 32fb11be..23dbee5e 100644 --- a/.Jules/palette.md +++ b/.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 `
` tags rather than `
` allows "Enter" key submissions, significantly increasing accessibility and UX. +**Action:** Always wrap interactive input and button groups in a `` component and ensure the submit action is bounded natively, especially for data entries and edits in overlays. diff --git a/frontend/src/components/modals/EditEdgeModal.test.tsx b/frontend/src/components/modals/EditEdgeModal.test.tsx new file mode 100644 index 00000000..978ca487 --- /dev/null +++ b/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( + + ); + + 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( + + ); + expect(container.firstChild).toBeNull(); + }); +}); diff --git a/frontend/src/components/modals/EditEdgeModal.tsx b/frontend/src/components/modals/EditEdgeModal.tsx index 2f24b358..c34b7e55 100644 --- a/frontend/src/components/modals/EditEdgeModal.tsx +++ b/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(Boolean(editingEdge), onRelCancel); if (!editingEdge) return null; @@ -39,13 +39,17 @@ export function EditEdgeModal({ justifyContent: "center", }} > -
{ + e.preventDefault(); + onRelSubmit(); + }} style={{ background: "#fff", padding: 20, @@ -85,15 +89,14 @@ export function EditEdgeModal({
-
+
); }