From 4c5fc4dc0df403c0762e9d7c3d7af8daa3d84057 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 21:15:55 +0000
Subject: [PATCH 1/4] =?UTF-8?q?UX=20=EA=B0=9C=EC=84=A0:=20=EA=B4=80?=
 =?UTF-8?q?=EA=B3=84=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`EditEdgeModal.tsx`의 "삭제" 버튼에 `aria-label="관계 삭제"`를 추가하여 스크린 리더 사용자가 어떤 대상을 삭제하는지 명확히 인지할 수 있도록 접근성을 개선했습니다. 또한 `ModalCoverage.test.tsx`의 쿼리 셀렉터를 업데이트하여 테스트가 변경사항을 올바르게 검증하도록 수정했습니다.
---
 .Jules/palette.md                                     | 3 +++
 frontend/src/components/modals/EditEdgeModal.tsx      | 1 +
 frontend/src/components/modals/ModalCoverage.test.tsx | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7577a1ca..924721d2 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -56,3 +56,6 @@
 ## 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.
+## 2026-07-15 - [Accessible Edge Deletion Modal]
+**Learning:** In edge configuration modals (like EditEdgeModal.tsx), the generic "삭제" (delete) button lacks screen reader context. Because edge deletion is a destructive action, users relying on assistive technology may trigger it without fully understanding what is being deleted.
+**Action:** Always provide contextual `aria-label`s on generic action buttons within relation modals. For example, adding `aria-label="관계 삭제"` to the delete button significantly improves clarity.
diff --git a/frontend/src/components/modals/EditEdgeModal.tsx b/frontend/src/components/modals/EditEdgeModal.tsx
index c34b7e55..68032698 100644
--- a/frontend/src/components/modals/EditEdgeModal.tsx
+++ b/frontend/src/components/modals/EditEdgeModal.tsx
@@ -81,6 +81,7 @@ export function EditEdgeModal({
         >
           <button
             type="button"
+            aria-label="관계 삭제"
             onClick={onRelDelete}
             style={{ color: "#b91c1c", borderColor: "#fca5a5" }}
           >
diff --git a/frontend/src/components/modals/ModalCoverage.test.tsx b/frontend/src/components/modals/ModalCoverage.test.tsx
index aa9dac53..94cb4d77 100644
--- a/frontend/src/components/modals/ModalCoverage.test.tsx
+++ b/frontend/src/components/modals/ModalCoverage.test.tsx
@@ -116,7 +116,7 @@ describe('modal behavior coverage', () => {
     fireEvent.change(screen.getByLabelText('제약조건 이름 (Label)'), {
       target: { value: 'fk_changed' },
     })
-    fireEvent.click(screen.getByRole('button', { name: '삭제' }))
+    fireEvent.click(screen.getByRole('button', { name: '관계 삭제' }))
     fireEvent.click(screen.getByRole('button', { name: '취소' }))
     fireEvent.click(screen.getByRole('button', { name: '저장' }))
     expect(setRelLabel).toHaveBeenCalledWith('fk_changed')

From a2866f9c872a2782b9f1dbf4efc98926472a139b Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 21:25:27 +0000
Subject: [PATCH 2/4] =?UTF-8?q?UX=20=EA=B0=9C=EC=84=A0:=20=EA=B4=80?=
 =?UTF-8?q?=EA=B3=84=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81=20=EB=B0=8F=20=ED=8C=A8?=
 =?UTF-8?q?=ED=82=A4=EC=A7=80=20=EB=B2=84=EC=A0=80=EB=8B=9D=20=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`EditEdgeModal.tsx`의 "삭제" 버튼에 `aria-label="관계 삭제"`를 추가하여 스크린 리더 사용자가 어떤 대상을 삭제하는지 명확히 인지할 수 있도록 접근성을 개선했습니다.
또한 CI 환경의 버전 관리를 위해 `package.json`의 packageManager 버전을 고정했습니다.
---
 frontend/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 02439a97..13eb0c0e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,5 +36,6 @@
   },
   "overrides": {
     "esbuild": "^0.25.0"
-  }
+  },
+  "packageManager": "pnpm@11.13.0"
 }

From 926e438cc6cb6701106c2d818bdd29f5ed5bc005 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 22:06:37 +0000
Subject: [PATCH 3/4] =?UTF-8?q?UX=20=EA=B0=9C=EC=84=A0:=20=EA=B4=80?=
 =?UTF-8?q?=EA=B3=84=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81=20=EB=B0=8F=20=ED=8C=A8?=
 =?UTF-8?q?=ED=82=A4=EC=A7=80=20=EB=A7=A4=EB=8B=88=EC=A0=80=20=EB=B2=84?=
 =?UTF-8?q?=EC=A0=80=EB=8B=9D=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`EditEdgeModal.tsx`의 "삭제" 버튼에 `aria-label="관계 삭제"`를 추가하여 스크린 리더 사용자가 어떤 대상을 삭제하는지 명확히 인지할 수 있도록 접근성을 개선했습니다.
또한 CI 환경의 버전 관리를 위해 `package.json`의 packageManager 버전을 고정했습니다.

From edaece33d00781e8161e84de3eec7a236f73da74 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 15 Jul 2026 23:22:07 +0000
Subject: [PATCH 4/4] =?UTF-8?q?UX=20=EA=B0=9C=EC=84=A0:=20=EA=B4=80?=
 =?UTF-8?q?=EA=B3=84=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EC=A0=91?=
 =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81=20=EB=B0=8F=20=ED=8C=A8?=
 =?UTF-8?q?=ED=82=A4=EC=A7=80=20=EB=B2=84=EC=A0=80=EB=8B=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`EditEdgeModal.tsx`의 "삭제" 버튼에 `aria-label="관계 삭제"`를 추가하여 스크린 리더 사용자가 어떤 대상을 삭제하는지 명확히 인지할 수 있도록 접근성을 개선했습니다.
또한 CI 환경의 버전 관리를 위해 `package.json`의 packageManager 버전을 고정했습니다. (pnpm@11.13.0)