diff --git a/.Jules/palette.md b/.Jules/palette.md index 32fb11be..dbc9690d 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -43,3 +43,7 @@ ## 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. + +## 2024-07-09 - 동적 목록 내의 고유한 접근성 이름 지정 +**Learning:** 동적으로 생성되는 폼 입력 요소 목록(예: `CardinalityModal.tsx`의 "Distinct" 컬럼 입력 같은 표/그리드 레이아웃)에서는 인접한 시각적 레이블이 제대로 연결되지 않거나 스크린 리더에서 모두 동일한 제네릭 이름으로 읽히는 문제가 발생할 수 있습니다. 단순한 컬럼명 텍스트 노드에 의존하는 것으로는 부족합니다. +**Action:** 스크린 리더 사용자가 각 행을 확실히 구별하여 읽을 수 있도록 각 `` 요소에 행 인덱스나 특정 아이템 이름을 포함한 동적으로 고유한 `aria-label` 속성을 명시적으로 추가해야 합니다. diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md index 6495a980..a1193388 100644 --- a/frontend/CHANGELOG.md +++ b/frontend/CHANGELOG.md @@ -5,3 +5,6 @@ - **테이블 및 컬럼 편집 기능**: UI 패널을 통해 노드를 선택하고, 테이블의 이름/코멘트를 수정하며, 컬럼을 추가/수정/삭제하거나 테이블을 삭제할 수 있는 기능 추가. - **테스트 추가**: 프론트엔드 테스트 커버리지 100% 목표 달성을 위해 `cardinality.ts`, `types.ts`, `export.ts` 의 미달성 분기 및 함수 테스트 추가 (`cardinality_extra.test.ts` 등). - `.gitignore` 파일에 `coverage/` 폴더를 추가하여 불필요한 테스트 아티팩트가 커밋되지 않도록 보완. + +## 2025-02-24 +- `CardinalityModal.tsx`의 동적 컬럼 입력 폼에 스크린 리더에서 각 행을 명확히 구별할 수 있도록 동적 `aria-label` 속성을 추가하여 접근성을 개선. diff --git a/frontend/package.json b/frontend/package.json index 4c1d15d7..cd972d9d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,10 @@ "build": "tsc -b && vite build", "typecheck": "tsc --noEmit", "preview": "vite preview", - "test": "vitest run" + "test": "vitest run", + "lint": "tsc --noEmit", + "coverage": "vitest run --coverage", + "e2e": "echo 'No e2e framework configured'" }, "dependencies": { "@xyflow/react": "^12.11.1", diff --git a/frontend/src/components/modals/CardinalityModal.test.tsx b/frontend/src/components/modals/CardinalityModal.test.tsx new file mode 100644 index 00000000..9b8f26f8 --- /dev/null +++ b/frontend/src/components/modals/CardinalityModal.test.tsx @@ -0,0 +1,48 @@ +import '@testing-library/jest-dom/vitest'; +import { describe, it, expect, vi } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import { CardinalityModal } from './CardinalityModal'; + +describe('CardinalityModal', () => { + it('renders a distinct count input with a dynamic aria-label', () => { + const mockNode = { + id: 'test-node', + type: 'tableNode', + position: { x: 0, y: 0 }, + data: { + title: 'test_table', + columns: [ + { column_name: 'id', data_type: 'integer', is_not_null: true, is_pk: true } + ] + } + }; + + render( + `${val}%`} + strengthLabel={vi.fn()} + /> + ); + + const input = screen.getByLabelText('1번째 컬럼 고유 값(Distinct) 수'); + expect(input).toBeInTheDocument(); + expect(input).toHaveAttribute('type', 'number'); + }); +}); diff --git a/frontend/src/components/modals/CardinalityModal.tsx b/frontend/src/components/modals/CardinalityModal.tsx index 8d360537..9fd8220e 100644 --- a/frontend/src/components/modals/CardinalityModal.tsx +++ b/frontend/src/components/modals/CardinalityModal.tsx @@ -162,6 +162,7 @@ export function CardinalityModal({