From 3a99408b0d05a8255e7d8dad589051851e452b2b Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 2 Jul 2026 21:25:54 +0000 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20EditTableModal=20?= =?UTF-8?q?=ED=8F=BC=20=EC=9E=85=EB=A0=A5=20=EC=9A=94=EC=86=8C=EC=9D=98=20?= =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 동적으로 생성되는 폼 내 입력 요소(input, checkbox)에 컬럼 이름을 포함하여 고유한 `aria-label`을 부여함. - 스크린 리더 사용자가 동일한 레이블이 반복되는 문제를 방지하고 명확하게 각 항목을 구별할 수 있도록 개선함. --- .Jules/palette.md | 3 +++ frontend/src/components/modals/EditTableModal.tsx | 15 ++++++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 32fb11be..733da7dd 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. +## 2023-11-20 - Dynamic Screen Reader Labeling in Mapped Inputs +**Learning:** In dynamically mapped rows (like column editing tables), assigning identical generic `aria-label` attributes to inputs across all rows destroys accessibility context for screen reader users. They hear repeated ambiguous announcements like "데이터 타입" without knowing which item it refers to. +**Action:** When rendering dynamic lists of form inputs, ensure each `` element has a uniquely identifiable `aria-label` by prepending or interpolating the row's specific item name (e.g., ``aria-label={`${columnName} 데이터 타입`}``). diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx index b1673cdd..9edf548f 100644 --- a/frontend/src/components/modals/EditTableModal.tsx +++ b/frontend/src/components/modals/EditTableModal.tsx @@ -108,7 +108,9 @@ export function EditTableModal({
- {editingNode.data.columns.map((col, idx) => ( + {editingNode.data.columns.map((col, idx) => { + const colIdent = col.column_name || `컬럼 ${idx + 1}`; + return (
@@ -139,6 +142,7 @@ export function EditTableModal({ type="checkbox" name={`col_nn_${idx}`} defaultChecked={col.is_not_null} + aria-label={`${colIdent} NN`} /> NN @@ -172,12 +176,13 @@ export function EditTableModal({ }); }} style={{ color: "#b91c1c", padding: "4px 8px" }} - aria-label={`${col.column_name} 컬럼 삭제`} + aria-label={`${colIdent} 삭제`} > 삭제
- ))} + ); + })}
From 257d53d0c6211eda0be79a189bbbdd0ba149e0e8 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 3 Jul 2026 05:46:18 +0000 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20EditTableModal=20?= =?UTF-8?q?=ED=8F=BC=20=EC=9A=94=EC=86=8C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `` 및 버튼의 `aria-label`을 배열 순서에 상관없이 명확하게 구분할 수 있도록 `colIdent` 변수를 이용해 개선 - React의 `key`를 `idx`에 종속되지 않게 보완하여 컴포넌트 마운트 에러 방지 및 수정 편의성 향상 - 모달 내 렌더링 최적화를 위해 안정적인 key 적용 --- .Jules/palette.md | 21 +++++++++++-------- .gitignore | 1 + frontend/package.json | 5 ++++- .../src/components/modals/EditTableModal.tsx | 10 +++++---- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 733da7dd..f5063a96 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -25,24 +25,27 @@ ## 2024-06-23 - [Safe Scope UX Tooltips] **Learning:** Adding helpful `title` tooltips to text indicating truncation (e.g., "... N more") significantly improves usability for screen readers and confused users without changing visual layouts. More importantly, when working in a repository with aggressive penetration testing (like STRIX), UX changes must avoid touching components that handle sensitive inputs (like `App.tsx` dealing with DSNs). If an agent modifies a vulnerable file, even just for a UX change, the CI will run the pen-test against that file and block the PR. **Action:** Always verify the security posture of a file before making non-security changes to it. Prefer touching isolated display components (like `TableNode.tsx`) for UX enhancements rather than high-risk root components. +## 2023-11-20 - Dynamic Screen Reader Labeling in Mapped Inputs +**Learning:** In dynamically mapped rows (like column editing tables), assigning identical generic `aria-label` attributes to inputs across all rows destroys accessibility context for screen reader users. They hear repeated ambiguous announcements like "데이터 타입" without knowing which item it refers to. +**Action:** When rendering dynamic lists of form inputs, ensure each `` element has a uniquely identifiable `aria-label` by prepending or interpolating the row's specific item name (e.g., `aria-label={`${columnName} 데이터 타입`}`). +## 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. ## 2026-06-21 - Accessible Badges for Domain Abbreviations **Learning:** ERD diagrams heavily use domain abbreviations like "PK", "FK", and "NOT NULL". For visually capable users, these are quickly recognized. However, for screen reader users or beginners, abbreviations can be ambiguous. Wrapping them in generic `span`s without `aria-label` or `title` results in poor accessibility and misses an opportunity to provide helpful context. **Action:** When displaying technical or domain-specific abbreviations in badges (like PK/FK), consistently add a descriptive `title` (for mouse hover tooltips) and an `aria-label` (for screen readers) explaining the abbreviation's full meaning (e.g. "Primary Key"). -## 2026-06-28 - STRIX Security Intersections and Strict Scope Enforcement -**Learning:** In projects with strict AI code review agents and security scanners (like STRIX), making multiple distinct micro-UX improvements (e.g. across different files or disparate components) in a single task intended for "ONE micro-UX improvement" will cause a CI failure. Furthermore, applying UX improvements to elements that handle potentially sensitive data (e.g. DSNs, or rendering unsanitized user input) can inadvertently trigger security scanners if those elements contain pre-existing vulnerabilities, blocking the PR entirely. -**Action:** When tasked with a single micro-UX improvement, strictly isolate the change to one specific element and file. When choosing an element, actively avoid modifying components that handle credentials or render un-escaped user inputs to avoid intersecting with existing unpatched security flaws. ## 2026-06-25 - Text Truncation Accessibility **Learning:** Elements using `text-overflow: ellipsis` can hide important table, column, example, and group context from users who need the full text. **Action:** Treat native `title` as a convenience hover fallback only. Pair truncated text with an accessible name or description, and make the truncated element focusable when the full value is otherwise hidden. ## 2026-06-25 - SPA Noscript Fallbacks **Learning:** A JavaScript-only SPA can show a blank screen when scripts are disabled, which is especially confusing for assistive technology users and locked-down browser environments. **Action:** Add a localized `