From 87c86623145675dd9a900dd03d12f38b6ab1b8a3 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 12 Jul 2026 01:56:13 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20context=20to=20?=
 =?UTF-8?q?generic=20buttons=20in=20EditTableModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 테이블 삭제, 복제, 취소, 저장, 컬럼 추가 등 모달 내의 제네릭한 버튼에 맥락을 제공하기 위해 대상 테이블 이름이 포함된 `aria-label`을 추가했습니다.
- 이를 통해 스크린 리더 사용자가 해당 버튼이 어떤 테이블에 대한 작업을 수행하는지 명확히 인지할 수 있도록 접근성을 개선했습니다.
---
 .Jules/palette.md                             |   4 +
 .../src/components/modals/EditTableModal.tsx  | 160 +++++++++++++-----
 2 files changed, 119 insertions(+), 45 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 862e9a61..f9a8e36e 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -46,3 +46,7 @@
 ## 2026-07-10 - Accessibility Anti-pattern: Excessive Tab Stops
 **Learning:** Adding `tabIndex={0}` to static, non-interactive text badges (like `abbr` or `span`) just to expose their `title` or `aria-label` attributes to keyboard users is an accessibility anti-pattern. It creates excessive tab stops and severely degrades keyboard navigation for users who rely on tab to move through actionable elements.
 **Action:** Never add `tabIndex={0}` to non-interactive elements unless they are specifically designed to be focusable for a functional reason. Use proper semantic HTML or let the screen reader read adjacent elements as part of natural navigation.
+
+## 2023-10-27 - Generic Dialog Buttons Need Full Context `aria-label`
+**Learning:** Generic action buttons in dialogs (e.g., "Delete", "Duplicate", "Cancel", "Save") can be confusing to screen reader users if they lack context. In `EditTableModal.tsx`, we encountered generic action labels that were improved by explicitly including the target resource name (e.g., table name) in the `aria-label`.
+**Action:** When adding generic action buttons like "Save" or "Delete" to modal dialogs, always inject contextual variables (like the item name) into their `aria-label` attribute (e.g., `aria-label={`${editingNode.data.title} 저장`}`) to ensure an unambiguous screen reader experience.
diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx
index 5c605558..a71f8502 100644
--- a/frontend/src/components/modals/EditTableModal.tsx
+++ b/frontend/src/components/modals/EditTableModal.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
+import React from "react";
 import type { Node } from "@xyflow/react";
 import type { TableNodeData } from "../../erd/convert";
-import { useDialogAccessibility } from './useDialogAccessibility';
+import { useDialogAccessibility } from "./useDialogAccessibility";
 
 interface EditTableModalProps {
   isOpen: boolean;
   editingNode: Node<TableNodeData> | null;
-  setEditingNode: React.Dispatch<React.SetStateAction<Node<TableNodeData> | null>>;
+  setEditingNode: React.Dispatch<
+    React.SetStateAction<Node<TableNodeData> | null>
+  >;
   setNodes: React.Dispatch<React.SetStateAction<Node<TableNodeData>[]>>;
   onEditTableCancel: () => void;
   onEditTableSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
@@ -22,19 +24,43 @@ export function EditTableModal({
   onEditTableSubmit,
   onDeleteTable,
 }: EditTableModalProps) {
-  const dialogRef = useDialogAccessibility(isOpen && Boolean(editingNode), onEditTableCancel);
+  const dialogRef = useDialogAccessibility(
+    isOpen && Boolean(editingNode),
+    onEditTableCancel,
+  );
 
   if (!isOpen || !editingNode) return null;
 
   return (
     <div className="modalOverlay">
-      <div className="modal" style={{ width: 800, maxWidth: "90vw", maxHeight: "90vh", display: "flex", flexDirection: "column" }} role="dialog" aria-modal="true" aria-labelledby="edit-table-title" ref={dialogRef} tabIndex={-1}>
+      <div
+        className="modal"
+        style={{
+          width: 800,
+          maxWidth: "90vw",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
+        }}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="edit-table-title"
+        ref={dialogRef}
+        tabIndex={-1}
+      >
         <div className="modal__header">
           <h3 id="edit-table-title">테이블 편집</h3>
-          <button type="button" aria-label="닫기" onClick={onEditTableCancel}>X</button>
+          <button type="button" aria-label="닫기" onClick={onEditTableCancel}>
+            X
+          </button>
         </div>
         <div style={{ overflowY: "auto", padding: "0 4px", flex: 1 }}>
-          <form id="editTableForm" onSubmit={onEditTableSubmit} className="col" style={{ gap: 12 }}>
+          <form
+            id="editTableForm"
+            onSubmit={onEditTableSubmit}
+            className="col"
+            style={{ gap: 12 }}
+          >
             <div className="col">
               <label htmlFor="editTableTitle">테이블명 (schema.table)</label>
               <input
@@ -56,10 +82,18 @@ export function EditTableModal({
             </div>
 
             <div className="col" style={{ marginTop: 16 }}>
-              <div className="row" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+              <div
+                className="row"
+                style={{
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: 8,
+                }}
+              >
                 <h4 style={{ margin: 0 }}>컬럼</h4>
                 <button
                   type="button"
+                  aria-label={`${editingNode.data.title} 컬럼 추가`}
                   onClick={() => {
                     setNodes((nds: Node<TableNodeData>[]) =>
                       nds.map((n: Node<TableNodeData>) => {
@@ -75,31 +109,31 @@ export function EditTableModal({
                                   data_type: "text",
                                   is_not_null: false,
                                   is_pk: false,
-                                }
-                              ]
-                            }
+                                },
+                              ],
+                            },
                           };
                         }
                         return n;
-                      })
+                      }),
                     );
                     setEditingNode((prev: Node<TableNodeData> | null) => {
-                       if (!prev) return prev;
-                       return {
-                         ...prev,
-                         data: {
-                           ...prev.data,
-                           columns: [
-                             ...prev.data.columns,
-                             {
-                               column_name: `new_col_${Date.now()}`,
-                               data_type: "text",
-                               is_not_null: false,
-                               is_pk: false,
-                             }
-                           ]
-                         }
-                       }
+                      if (!prev) return prev;
+                      return {
+                        ...prev,
+                        data: {
+                          ...prev.data,
+                          columns: [
+                            ...prev.data.columns,
+                            {
+                              column_name: `new_col_${Date.now()}`,
+                              data_type: "text",
+                              is_not_null: false,
+                              is_pk: false,
+                            },
+                          ],
+                        },
+                      };
                     });
                   }}
                 >
@@ -109,7 +143,11 @@ export function EditTableModal({
 
               <div className="col" style={{ gap: 8 }}>
                 {editingNode.data.columns.map((col, idx) => (
-                  <div key={`${col.column_name}-${idx}`} className="row" style={{ gap: 8, alignItems: "center" }}>
+                  <div
+                    key={`${col.column_name}-${idx}`}
+                    className="row"
+                    style={{ gap: 8, alignItems: "center" }}
+                  >
                     <input
                       type="text"
                       name={`col_name_${idx}`}
@@ -126,7 +164,10 @@ export function EditTableModal({
                       style={{ flex: 1.5 }}
                       aria-label="데이터 타입"
                     />
-                    <label className="row" style={{ gap: 4, whiteSpace: "nowrap" }}>
+                    <label
+                      className="row"
+                      style={{ gap: 4, whiteSpace: "nowrap" }}
+                    >
                       <input
                         type="checkbox"
                         name={`col_pk_${idx}`}
@@ -134,7 +175,10 @@ export function EditTableModal({
                       />
                       PK
                     </label>
-                    <label className="row" style={{ gap: 4, whiteSpace: "nowrap" }}>
+                    <label
+                      className="row"
+                      style={{ gap: 4, whiteSpace: "nowrap" }}
+                    >
                       <input
                         type="checkbox"
                         name={`col_nn_${idx}`}
@@ -145,7 +189,12 @@ export function EditTableModal({
                     <button
                       type="button"
                       onClick={() => {
-                        if (!window.confirm(`'${col.column_name}' 컬럼을 삭제하시겠습니까?`)) return;
+                        if (
+                          !window.confirm(
+                            `'${col.column_name}' 컬럼을 삭제하시겠습니까?`,
+                          )
+                        )
+                          return;
                         setNodes((nds: Node<TableNodeData>[]) =>
                           nds.map((n: Node<TableNodeData>) => {
                             if (n.id === editingNode.id) {
@@ -153,22 +202,26 @@ export function EditTableModal({
                                 ...n,
                                 data: {
                                   ...n.data,
-                                  columns: n.data.columns.filter((_, i) => i !== idx)
-                                }
+                                  columns: n.data.columns.filter(
+                                    (_, i) => i !== idx,
+                                  ),
+                                },
                               };
                             }
                             return n;
-                          })
+                          }),
                         );
                         setEditingNode((prev: Node<TableNodeData> | null) => {
-                           if (!prev) return prev;
-                           return {
-                             ...prev,
-                             data: {
-                               ...prev.data,
-                               columns: prev.data.columns.filter((_, i) => i !== idx)
-                             }
-                           };
+                          if (!prev) return prev;
+                          return {
+                            ...prev,
+                            data: {
+                              ...prev.data,
+                              columns: prev.data.columns.filter(
+                                (_, i) => i !== idx,
+                              ),
+                            },
+                          };
                         });
                       }}
                       style={{ color: "#b91c1c", padding: "4px 8px" }}
@@ -183,10 +236,19 @@ export function EditTableModal({
           </form>
         </div>
 
-        <div className="row" style={{ justifyContent: "space-between", marginTop: 16, paddingTop: 16, borderTop: "1px solid #e2e8f0" }}>
+        <div
+          className="row"
+          style={{
+            justifyContent: "space-between",
+            marginTop: 16,
+            paddingTop: 16,
+            borderTop: "1px solid #e2e8f0",
+          }}
+        >
           <div className="row" style={{ gap: 8 }}>
             <button
               type="button"
+              aria-label={`${editingNode.data.title} 테이블 삭제`}
               onClick={onDeleteTable}
               style={{ color: "#b91c1c", borderColor: "#fca5a5" }}
             >
@@ -194,6 +256,7 @@ export function EditTableModal({
             </button>
             <button
               type="button"
+              aria-label={`${editingNode.data.title} 복제`}
               onClick={() => {
                 const dupId = `${editingNode.id}_copy_${Date.now()}`;
                 setNodes((nds) => [
@@ -221,9 +284,16 @@ export function EditTableModal({
             </button>
           </div>
           <div className="row">
-            <button type="button" onClick={onEditTableCancel}>취소</button>
+            <button
+              type="button"
+              aria-label={`${editingNode.data.title} 취소`}
+              onClick={onEditTableCancel}
+            >
+              취소
+            </button>
             <button
               type="submit"
+              aria-label={`${editingNode.data.title} 저장`}
               form="editTableForm"
               style={{ background: "#034ea2", color: "#fff" }}
             >