From 10fc268d2594ed5a9500d32bed031dcfb781f1e0 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 6 Aug 2026 01:57:28 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20contextual?=
 =?UTF-8?q?=20ARIA=20labels=20to=20table=20edit=20modal=20actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added dynamic, context-aware `aria-label`s to the "테이블 삭제" (Delete) and "복제" (Duplicate) buttons in `EditTableModal.tsx`.
- Updated test matchers in `EditTableModal.test.tsx` and `ModalCoverage.test.tsx` to match the new accessible names.
- Improves screen reader comprehension of destructive and duplication actions.
---
 .jules/palette.md                                      | 3 +++
 frontend/src/components/modals/EditTableModal.test.tsx | 2 +-
 frontend/src/components/modals/EditTableModal.tsx      | 2 ++
 frontend/src/components/modals/ModalCoverage.test.tsx  | 4 ++--
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index bd0f7324..a56047ce 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -57,3 +57,6 @@
 ## 2026-07-30 - Add window.confirm for destructive actions
 **Learning:** Destructive actions like deleting groups and edge relationships previously occurred immediately without user confirmation.
 **Action:** Always wrap delete operations with window.confirm() dialogs and ensure corresponding tests successfully mock window.confirm.
+## 2026-08-05 - Add contextual ARIA labels to modal actions
+**Learning:** Generic buttons like "Delete" or "Duplicate" in modals can lack context for screen reader users, especially when the modal might be spawned from different entities.
+**Action:** Always inject the entity's name into the `aria-label` (e.g., `${node.data.title} 테이블 삭제`) for destructive or duplicate actions inside modals to provide clear, contextual feedback to screen readers.
diff --git a/frontend/src/components/modals/EditTableModal.test.tsx b/frontend/src/components/modals/EditTableModal.test.tsx
index 1a8c9af5..80244919 100644
--- a/frontend/src/components/modals/EditTableModal.test.tsx
+++ b/frontend/src/components/modals/EditTableModal.test.tsx
@@ -170,7 +170,7 @@ describe('EditTableModal', () => {
     render(<EditTableModal {...defaultProps} editingNode={editingNode as any} setNodes={setNodesMock} onEditTableCancel={onEditTableCancelMock} />);
 
     const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: '복제' }));
+    await user.click(screen.getByRole('button', { name: 'test_table 테이블 복제' }));
 
     expect(setNodesMock).toHaveBeenCalled();
     expect(onEditTableCancelMock).toHaveBeenCalled();
diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx
index 998929d4..64398053 100644
--- a/frontend/src/components/modals/EditTableModal.tsx
+++ b/frontend/src/components/modals/EditTableModal.tsx
@@ -190,12 +190,14 @@ export function EditTableModal({
             <button
               type="button"
               onClick={onDeleteTable}
+              aria-label={`${editingNode.data.title} 테이블 삭제`}
               style={{ color: "#b91c1c", borderColor: "#fca5a5" }}
             >
               테이블 삭제
             </button>
             <button
               type="button"
+              aria-label={`${editingNode.data.title} 테이블 복제`}
               onClick={() => {
                 const dupId = `${editingNode.id}_copy_${Date.now()}`;
                 setNodes((nds) => [
diff --git a/frontend/src/components/modals/ModalCoverage.test.tsx b/frontend/src/components/modals/ModalCoverage.test.tsx
index 8732f7ef..1553eb05 100644
--- a/frontend/src/components/modals/ModalCoverage.test.tsx
+++ b/frontend/src/components/modals/ModalCoverage.test.tsx
@@ -183,8 +183,8 @@ describe('modal behavior coverage', () => {
     expect(deleteEditing(tableNode)?.data.columns).toHaveLength(1)
 
     fireEvent.submit(document.getElementById('editTableForm')!)
-    fireEvent.click(screen.getByRole('button', { name: '테이블 삭제' }))
-    fireEvent.click(screen.getByRole('button', { name: '복제' }))
+    fireEvent.click(screen.getByRole('button', { name: 'public.users 테이블 삭제' }))
+    fireEvent.click(screen.getByRole('button', { name: 'public.users 테이블 복제' }))
     const duplicate = setNodes.mock.calls[2]?.[0] as (nodes: Node<TableNodeData>[]) => Node<TableNodeData>[]
     const duplicated = duplicate([tableNode])[1]!
     expect(duplicated).toMatchObject({

From 2d6183160cb095b35cf4498d5058dff049f604a9 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Thu, 6 Aug 2026 11:56:34 +0900
Subject: [PATCH 2/2] chore(a11y): remove transient agent journal change

---
 .jules/palette.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index a56047ce..bd0f7324 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -57,6 +57,3 @@
 ## 2026-07-30 - Add window.confirm for destructive actions
 **Learning:** Destructive actions like deleting groups and edge relationships previously occurred immediately without user confirmation.
 **Action:** Always wrap delete operations with window.confirm() dialogs and ensure corresponding tests successfully mock window.confirm.
-## 2026-08-05 - Add contextual ARIA labels to modal actions
-**Learning:** Generic buttons like "Delete" or "Duplicate" in modals can lack context for screen reader users, especially when the modal might be spawned from different entities.
-**Action:** Always inject the entity's name into the `aria-label` (e.g., `${node.data.title} 테이블 삭제`) for destructive or duplicate actions inside modals to provide clear, contextual feedback to screen readers.