From b711560cee965fb5be904bb45b2482a2bc9b3986 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 5 Jul 2026 21:26:41 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=8F=99=EC=A0=81=20?= =?UTF-8?q?=ED=8F=BC=EA=B3=BC=20=EB=B1=83=EC=A7=80=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(ARIA=20Label=20=EB=B0=8F=20Semantic=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=20=EC=A0=81=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 동적으로 생성되는 폼 요소 및 뱃지(Badge) 컴포넌트의 스크린 리더 접근성을 개선하기 위해 다음 작업을 수행했습니다. 💡 작업 내용: 1. `EditTableModal.tsx`: 테이블 컬럼 편집 시 생성되는 다중 `input` 및 `checkbox` 요소들의 `aria-label`에 각 컬럼의 고유 이름(`col.column_name`)을 명시하여 각 요소를 식별할 수 있도록 개선. 2. `TableNode.tsx`: 시각적 뱃지로 사용된 `span` 요소를 `abbr` 요소로 교체하여 스크린 리더가 `title` 및 `aria-label` 텍스트를 안정적으로 읽을 수 있도록 시맨틱 마크업으로 변경. 3. 관련 발견 사항을 `.Jules/palette.md` 파일에 기록. 🎯 기대 효과: 스크린 리더 사용자가 포커스 시 반복되는 동일한 `aria-label` 대신 각각의 컨텍스트를 정확하게 인지할 수 있게 되어 폼 및 UI 인지도를 크게 높입니다. --- .Jules/palette.md | 3 +++ frontend/src/components/modals/EditTableModal.tsx | 6 ++++-- frontend/src/erd/TableNode.tsx | 4 ++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 32fb11be..e7a718c7 100644 --- a/.Jules/palette.md +++ b/.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 `` 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 `` elements used as UI badges with `` or explicit semantic roles to ensure `aria-label` texts are consistently exposed to screen readers. diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx index b1673cdd..c8dbe0cd 100644 --- a/frontend/src/components/modals/EditTableModal.tsx +++ b/frontend/src/components/modals/EditTableModal.tsx @@ -116,7 +116,7 @@ export function EditTableModal({ defaultValue={col.column_name} placeholder="컬럼명" style={{ flex: 2 }} - aria-label="컬럼명" + aria-label={`${col.column_name || '새 컬럼'} 컬럼명`} /> @@ -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 diff --git a/frontend/src/erd/TableNode.tsx b/frontend/src/erd/TableNode.tsx index f80d8488..6d189ac6 100644 --- a/frontend/src/erd/TableNode.tsx +++ b/frontend/src/erd/TableNode.tsx @@ -158,9 +158,9 @@ function TableNode(props: NodeProps) { ) : null} {c.is_not_null ? ( - + NOT NULL - + ) : null}