From 53e4a31b342e3c28ae44157a5cad4653e1c87813 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 4 Jul 2026 02:07:04 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?EditEdgeModal=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `EditEdgeModal`의 제네릭한 "삭제" 버튼에 동적 맥락이 담긴 `aria-label`을 추가했습니다.
- 이를 통해 스크린 리더 사용자가 단순히 "삭제"라고만 듣는 대신, 어떤 관계를 삭제하는 것인지 정확한 맥락을 파악할 수 있게 개선되었습니다.
- `.Jules/palette.md`에 관련된 접근성 개선 학습 내용을 기록했습니다.
---
 .Jules/palette.md                                | 4 ++++
 frontend/src/components/modals/EditEdgeModal.tsx | 9 ++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 32fb11be..24d57ba6 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -43,3 +43,7 @@
 ## 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.
+
+## 2024-07-04 - [EditEdgeModal 삭제 버튼 접근성 개선]
+**Learning:** 모달 대화상자 내에 위치한 일반적인 "삭제"와 같은 액션 버튼은 시각적으로는 맥락(예: 어떤 관계를 삭제하는지)이 주어지지만, 스크린 리더 사용자에게는 단순한 "삭제" 버튼으로만 읽혀서 어떤 항목이 삭제되는지 모호함을 유발할 수 있습니다.
+**Action:** 대화상자에서 항목을 삭제하는 일반적인 버튼에는 `aria-label`을 사용하여 동적 맥락(예: `${source}에서 ${target}로의 관계 삭제`)을 명확히 제공함으로써 스크린 리더 환경의 모호함을 방지해야 합니다.
diff --git a/frontend/src/components/modals/EditEdgeModal.tsx b/frontend/src/components/modals/EditEdgeModal.tsx
index 2f24b358..b85caece 100644
--- a/frontend/src/components/modals/EditEdgeModal.tsx
+++ b/frontend/src/components/modals/EditEdgeModal.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 import type { Edge } from "@xyflow/react";
-import { useDialogAccessibility } from './useDialogAccessibility';
+import { useDialogAccessibility } from "./useDialogAccessibility";
 
 interface EditEdgeModalProps {
   editingEdge: Edge | null;
@@ -79,11 +79,14 @@ export function EditEdgeModal({
             type="button"
             onClick={onRelDelete}
             style={{ color: "#b91c1c", borderColor: "#fca5a5" }}
+            aria-label={`${editingEdge.source}에서 ${editingEdge.target}로의 관계 삭제`}
           >
             삭제
           </button>
           <div className="row">
-            <button type="button" onClick={onRelCancel}>취소</button>
+            <button type="button" onClick={onRelCancel}>
+              취소
+            </button>
             <button
               type="button"
               onClick={onRelSubmit}