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 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=8F=99?= =?UTF-8?q?=EC=A0=81=20=ED=8F=BC=EA=B3=BC=20=EB=B1=83=EC=A7=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0=20(ARIA=20Label=20=EB=B0=8F=20Se?= =?UTF-8?q?mantic=20=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} Date: Mon, 6 Jul 2026 06:39:16 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B1=83?= =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20?= =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0=20(Semantic=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) 컴포넌트의 스크린 리더 접근성을 개선하기 위해 다음 작업을 수행했습니다. STRIX XSS 경고로 인해 민감한 컴포넌트에 데이터를 바인딩하는 방법(aria-label 에 col.column_name 삽입 등)은 배제하고, 안전하게 독립된 화면 컴포넌트인 `TableNode.tsx`의 시맨틱만 향상시켰습니다. 💡 작업 내용: 1. `TableNode.tsx`: 시각적 뱃지로 사용된 `span` 요소를 `abbr` 요소로 교체하여 스크린 리더가 `title` 및 `aria-label` 텍스트를 안정적으로 읽을 수 있도록 시맨틱 마크업으로 변경. 2. 관련 발견 사항을 `.Jules/palette.md` 파일에 기록. 🎯 기대 효과: 스크린 리더 사용자가 뱃지에 포커스 시 컨텍스트를 정확하게 인지할 수 있게 되어 폼 및 UI 인지도를 크게 높입니다. --- .Jules/palette.md | 6 +++--- frontend/src/components/modals/EditTableModal.tsx | 6 ++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index e7a718c7..9d6c4f20 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -43,6 +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. +## 2026-07-06 - Semantic Tags for Technical Badges +**Learning:** In accessibility optimization tasks, injecting unsanitized data (e.g. `col.column_name`) directly into DOM attributes (like `aria-label`) within sensitive editing components (like `EditTableModal.tsx`) can inadvertently trigger XSS security scanners and CI blockades in strict environments like STRIX. Additionally, non-semantic elements like `` can have their `aria-label` dropped by assistive technologies. +**Action:** When working on isolated UX fixes in highly secured repos, avoid touching data-binding inside sensitive inputs. Instead, focus on purely semantic upgrades in isolated display components (e.g., swapping `` for `` in `TableNode.tsx`) to ensure accessibility attributes are reliably announced without crossing trust boundaries. diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx index c8dbe0cd..b1673cdd 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={`${col.column_name || '새 컬럼'} 컬럼명`} + aria-label="컬럼명" /> @@ -140,7 +139,6 @@ export function EditTableModal({ type="checkbox" name={`col_nn_${idx}`} defaultChecked={col.is_not_null} - aria-label={`${col.column_name || '새 컬럼'} NN (Not Null)`} /> NN