🎨 Palette: 동적 폼 접근성(Aria-label) 고유 식별 및 시맨틱 뱃지 도입

.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.
+## 2025-07-05 - Unique aria-labels for dynamic forms & Semantic Tags for Badges
+**Learning:** In dynamically generated forms within arrays or mapped lists, generic `aria-label`s (like `aria-label="컬럼명"`) are read identically across all rows, making it impossible for screen readers to identify which row's input they are currently focused on. Furthermore, non-semantic tags like `<span>` often drop `aria-label`s in assistive technologies because they lack an inherent role.
+**Action:** Always interpolate unique identifiers into `aria-label`s within list maps (e.g., ``aria-label={`${itemName} 데이터 타입`}``). Replace generic `<span>` elements used as UI badges with `<abbr>` or explicit semantic roles to ensure `aria-label` texts are consistently exposed to screen readers.

frontend/src/components/modals/EditTableModal.tsx

@@ -116,21 +116,22 @@ export function EditTableModal({
                       defaultValue={col.column_name}
                       placeholder="컬럼명"
                       style={{ flex: 2 }}
-                      aria-label="컬럼명"
+                      aria-label={`${col.column_name || '새 컬럼'} 컬럼명`}
                     />
                     <input
                       type="text"
                       name={`col_type_${idx}`}
                       defaultValue={col.data_type}
                       placeholder="데이터 타입"
                       style={{ flex: 1.5 }}
-                      aria-label="데이터 타입"
+                      aria-label={`${col.column_name || '새 컬럼'} 데이터 타입`}
                     />
                     <label className="row" style={{ gap: 4, whiteSpace: "nowrap" }}>
                       <input
                         type="checkbox"
                         name={`col_pk_${idx}`}
                         defaultChecked={col.is_pk}
+                        aria-label={`${col.column_name || '새 컬럼'} PK`}
                       />
                       PK
                     </label>
@@ -139,6 +140,7 @@ export function EditTableModal({
                         type="checkbox"
                         name={`col_nn_${idx}`}
                         defaultChecked={col.is_not_null}
+                        aria-label={`${col.column_name || '새 컬럼'} NN (Not Null)`}
                       />
                       NN
                     </label>

frontend/src/erd/TableNode.tsx

@@ -158,9 +158,9 @@ function TableNode(props: NodeProps<TableNodeNode>) {
                 </abbr>
               ) : null}
               {c.is_not_null ? (
-                <span className="tableNode__badge" title="Not Null" aria-label="필수 입력 (Not Null)">
+                <abbr className="tableNode__badge" title="Not Null" aria-label="필수 입력 (Not Null)">
                   NOT NULL
-                </span>
+                </abbr>
               ) : null}
               <Handle
                 type="source"