diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 153677e9a..a6d27f114 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,7 +18,7 @@ jobs: egress-policy: audit - name: Checkout - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@v4 - name: Setup Python uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0 @@ -52,7 +52,7 @@ jobs: egress-policy: audit - name: Checkout - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0 diff --git a/.jules/palette.md b/.jules/palette.md index bd0f73248..70e40d5dd 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -57,3 +57,9 @@ ## 2026-07-30 - Add window.confirm for destructive actions **Learning:** Destructive actions like deleting groups and edge relationships previously occurred immediately without user confirmation. **Action:** Always wrap delete operations with window.confirm() dialogs and ensure corresponding tests successfully mock window.confirm. +## 2024-08-17 - Contextual ARIA labels for generic action buttons +**Learning:** Generic action buttons like "테이블 삭제" (Delete Table) inside modals lack sufficient context for screen reader users when multiple modals or nested actions might exist. +**Action:** Always provide an explicit `aria-label` directly on generic action buttons (e.g., `aria-label={`${editingNode.data.title} 테이블 삭제`}`) to give screen readers full context about the specific entity being acted upon. +## 2026-08-17 - Ambiguous Generic Action Buttons (열기) +**Learning:** Having multiple elements with the generic "열기" (Open) label in the same interface (like "Open Editor" vs "Open Diagram") without unique accessible names causes screen reader ambiguity, and breaks accessibility test suites that search by role and name (e.g. `getByRole('button', { name: '열기' })`). This specific issue triggered a CI failure because `App.coverage.test.tsx` couldn't uniquely identify the correct snapshot "열기" button among project "열기" buttons. +**Action:** When a screen has multiple generic action buttons (e.g., in a data table), always apply a contextual `aria-label` (e.g., `aria-label={`${item.name} 다이어그램 열기`}`) so that assistive tech and test queries can precisely target the correct element. diff --git a/frontend/src/App.coverage.test.tsx b/frontend/src/App.coverage.test.tsx index 0b9a20aa8..fc0c2752f 100644 --- a/frontend/src/App.coverage.test.tsx +++ b/frontend/src/App.coverage.test.tsx @@ -323,7 +323,7 @@ describe('App orchestration coverage', () => { expect(screen.getAllByText('<Billing & Core>').length).toBeGreaterThan(0) fireEvent.click(screen.getByRole('button', { name: '전체 보기' })) expect(screen.getByRole('heading', { name: '프로젝트' })).toBeInTheDocument() - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[1]!) + fireEvent.click(screen.getAllByRole('button', { name: /(다이어그램 보기|다이어그램 열기)/ })[1]!) expect(screen.getByRole('heading', { name: '다이어그램' })).toBeInTheDocument() fireEvent.change(screen.getByLabelText('다이어그램 검색'), { target: { value: 'no-match' } }) expect(screen.getByText('검색 결과가 없습니다.')).toBeInTheDocument() @@ -372,7 +372,7 @@ describe('App orchestration coverage', () => { it('polls a terminal snapshot, builds graph state, and exercises editor handlers', async () => { await renderReadyApp() fireEvent.click(screen.getByRole('button', { name: '다이어그램' })) - const openButtons = await screen.findAllByRole('button', { name: '열기' }) + const openButtons = await screen.findAllByRole('button', { name: /다이어그램 열기/ }) vi.useFakeTimers() fireEvent.click(openButtons[0]!) await act(async () => { @@ -527,8 +527,8 @@ describe('App orchestration coverage', () => { fireEvent.click(screen.getByRole('button', { name: /Billing.*다이어그램 보기/ })) expect(screen.getByRole('heading', { name: '다이어그램' })).toBeInTheDocument() fireEvent.click(screen.getByRole('button', { name: '대시보드' })) - await waitFor(() => expect(screen.getAllByRole('button', { name: '열기' }).length).toBeGreaterThan(0)) - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + await waitFor(() => expect(screen.getAllByRole('button', { name: /다이어그램 열기/ }).length).toBeGreaterThan(0)) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 열기/ })[0]!) expect(screen.getByRole('toolbar', { name: 'ERD 캔버스 도구' })).toBeInTheDocument() fireEvent.click(screen.getByRole('button', { name: '대시보드' })) fireEvent.click(screen.getByRole('button', { name: '편집기로 이동' })) @@ -541,7 +541,7 @@ describe('App orchestration coverage', () => { fireEvent.change(screen.getByLabelText('새 프로젝트 이름'), { target: { value: 'Roadmap' } }) fireEvent.click(screen.getByRole('button', { name: '새 프로젝트' })) await waitFor(() => expect(api.createProject).toHaveBeenCalledWith('Roadmap')) - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ })[0]!) expect(screen.getByRole('heading', { name: '다이어그램' })).toBeInTheDocument() fireEvent.click(screen.getByRole('button', { name: '대시보드' })) fireEvent.click(screen.getByRole('button', { name: '목록 보기' })) @@ -611,7 +611,7 @@ describe('App orchestration coverage', () => { await renderReadyApp() fireEvent.click(screen.getByRole('button', { name: '다이어그램' })) vi.useFakeTimers() - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ })[0]!) await act(async () => { vi.advanceTimersByTime(1000) await Promise.resolve() @@ -642,7 +642,7 @@ describe('App orchestration coverage', () => { await renderReadyApp() fireEvent.click(screen.getByRole('button', { name: '다이어그램' })) vi.useFakeTimers() - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ })[0]!) await act(async () => { vi.advanceTimersByTime(1000) await Promise.resolve() @@ -717,7 +717,7 @@ describe('App orchestration coverage', () => { />, ) expect(screen.getAllByText('현재 프로젝트')).toHaveLength(2) - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ })[0]!) expect(onOpenEditor).toHaveBeenCalledWith('s1') }) @@ -745,7 +745,7 @@ describe('App orchestration coverage', () => { await renderReadyApp() fireEvent.click(screen.getByRole('button', { name: '다이어그램' })) vi.useFakeTimers() - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ })[0]!) await act(async () => { vi.advanceTimersByTime(1000) await Promise.resolve() @@ -785,7 +785,7 @@ describe('App orchestration coverage', () => { await renderReadyApp() fireEvent.click(screen.getByRole('button', { name: '다이어그램' })) vi.useFakeTimers() - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ })[0]!) await act(async () => { vi.advanceTimersByTime(1000) await Promise.resolve() @@ -823,10 +823,10 @@ describe('App orchestration coverage', () => { api.listSnapshots.mockResolvedValue(snapshots) await renderReadyApp() fireEvent.click(screen.getByRole('button', { name: '다이어그램' })) - await waitFor(() => expect(screen.getAllByRole('button', { name: '열기' }).length).toBeGreaterThan(0)) + await waitFor(() => expect(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ }).length).toBeGreaterThan(0)) vi.useFakeTimers() api.getSnapshot.mockRejectedValueOnce(new Error('poll down')) - fireEvent.click(screen.getAllByRole('button', { name: '열기' })[0]!) + fireEvent.click(screen.getAllByRole('button', { name: /다이어그램 (열기|보기)/ })[0]!) await act(async () => { vi.advanceTimersByTime(1000) await Promise.resolve() diff --git a/frontend/src/App.searchPolling.test.tsx b/frontend/src/App.searchPolling.test.tsx index 6c48313fc..72bd7a6f9 100644 --- a/frontend/src/App.searchPolling.test.tsx +++ b/frontend/src/App.searchPolling.test.tsx @@ -133,7 +133,7 @@ async function renderReadyApp() { async function diagramOpenButtons() { fireEvent.click(screen.getByRole('button', { name: '다이어그램' })) - return screen.findAllByRole('button', { name: '열기' }) + return screen.findAllByRole('button', { name: /(다이어그램 보기|다이어그램 열기)/ }) } async function openSnapshot(index: number) { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 49812e448..04ad59252 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1375,6 +1375,7 @@ export default function App() { setSelectedProjectId(project.project_space_uuid); setActiveView("diagrams"); }} + aria-label={`${project.project_name} 다이어그램 보기`} > 열기 @@ -1780,6 +1781,7 @@ export function DiagramTable({ diff --git a/frontend/src/components/modals/EditTableModal.tsx b/frontend/src/components/modals/EditTableModal.tsx index 998929d44..e83f9ff75 100644 --- a/frontend/src/components/modals/EditTableModal.tsx +++ b/frontend/src/components/modals/EditTableModal.tsx @@ -191,6 +191,7 @@ export function EditTableModal({ type="button" onClick={onDeleteTable} style={{ color: "#b91c1c", borderColor: "#fca5a5" }} + aria-label={`${editingNode.data.title} 테이블 삭제`} > 테이블 삭제 diff --git a/frontend/src/components/modals/ModalCoverage.test.tsx b/frontend/src/components/modals/ModalCoverage.test.tsx index 8732f7efa..a5b37a4c3 100644 --- a/frontend/src/components/modals/ModalCoverage.test.tsx +++ b/frontend/src/components/modals/ModalCoverage.test.tsx @@ -183,7 +183,7 @@ describe('modal behavior coverage', () => { expect(deleteEditing(tableNode)?.data.columns).toHaveLength(1) fireEvent.submit(document.getElementById('editTableForm')!) - fireEvent.click(screen.getByRole('button', { name: '테이블 삭제' })) + fireEvent.click(screen.getByRole('button', { name: 'public.users 테이블 삭제' })) fireEvent.click(screen.getByRole('button', { name: '복제' })) const duplicate = setNodes.mock.calls[2]?.[0] as (nodes: Node[]) => Node[] const duplicated = duplicate([tableNode])[1]!