From 5b038d1a4a830d8b98195a9306d5b0b71279c0b0 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Tue, 30 Jun 2026 21:44:40 +0000 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EA=B8=B0?= =?UTF-8?q?=EC=88=A0=20=EC=9A=A9=EC=96=B4=20=EC=95=BD=EC=96=B4=EC=97=90=20?= =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TableNode.tsx의 PK/FK 뱃지에 aria-label 속성을 추가하여 스크린 리더 지원 개선 - EditTableModal.tsx의 체크박스 옆에 위치한 PK/NN 텍스트에 abbr 태그 및 aria-label 적용 - 관련 접근성 학습 내용을 .Jules/palette.md 저널에 기록 - 변경 사항에 대한 테스트 코드를 작성하고 프론트엔드 검증 통과 완료 --- .Jules/palette.md | 5 +- .gitignore | 1 + .../src/components/modals/EditTableModal.tsx | 6 +- frontend/src/erd/TableNode.test.tsx | 76 +++++++++---------- frontend/src/erd/TableNode.tsx | 8 +- frontend/src/setupTests.ts | 1 + frontend/vitest.config.ts | 30 ++++++++ 7 files changed, 82 insertions(+), 45 deletions(-) create mode 100644 frontend/src/setupTests.ts create mode 100644 frontend/vitest.config.ts diff --git a/.Jules/palette.md b/.Jules/palette.md index 19da4f36..57b55c20 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -33,4 +33,7 @@ **Action:** Always ensure custom modals implement the `dialog` role with an explicit `aria-modal="true"` and an `aria-labelledby` referencing their heading. ## 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. \ No newline at end of file +**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. +## 2024-07-01 - Technical Abbreviations Accessibility +**Learning:** Combining `title` and `aria-label` attributes on domain-specific abbreviations (e.g., PK, FK, NN) is crucial. While `title` provides visual hover feedback, screen readers may ignore it on `` tags or non-interactive elements. Additionally, associated interactive elements like `` should also have an explicit `aria-label` for full context. +**Action:** When adding technical abbreviations in UI badges or forms, consistently use a descriptive `title` attribute for tooltips and an `aria-label` for screen readers to ensure accessibility across all modalities. diff --git a/.gitignore b/.gitignore index be445549..44a517fd 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ frontend/coverage/ registered_agents.json task_agent_mapping.json backend/venv/ +frontend/coverage diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx index c8e761db..dcc173e1 100644 --- a/frontend/src/components/modals/EditTableModal.tsx +++ b/frontend/src/components/modals/EditTableModal.tsx @@ -128,16 +128,18 @@ export function EditTableModal({ type="checkbox" name={`col_pk_${idx}`} defaultChecked={col.is_pk} + aria-label="Primary Key" /> - PK + PK