diff --git a/frontend/e2e/briefwechsel-a11y.spec.ts b/frontend/e2e/briefwechsel-a11y.spec.ts index af2dbf97..2a001afb 100644 --- a/frontend/e2e/briefwechsel-a11y.spec.ts +++ b/frontend/e2e/briefwechsel-a11y.spec.ts @@ -2,9 +2,9 @@ import AxeBuilder from '@axe-core/playwright'; import { test, expect } from '@playwright/test'; // Accessibility coverage specifically for the briefwechsel thumbnail-row -// layout. Runs axe-core (wcag2a + wcag2aa) across three viewports and two -// color schemes so color-contrast regressions on the meta text or the -// distribution bar are caught independently of the site-wide sweep. +// layout. Seeds two persons + a bilateral document via the API so the page +// reaches the results state (not the hero), then runs axe-core +// (wcag2a + wcag2aa) across three viewports and two color schemes. const VIEWPORTS = [ { name: 'mobile', width: 375, height: 812 }, @@ -14,15 +14,49 @@ const VIEWPORTS = [ const THEMES = ['light', 'dark'] as const; +let senderId: string; +let receiverId: string; + test.describe('Accessibility — /briefwechsel row layout', () => { + test.beforeAll(async ({ request }) => { + const timestamp = Date.now(); + const senderRes = await request.post('/api/persons', { + data: { firstName: 'A11y', lastName: `Sender-${timestamp}` } + }); + if (!senderRes.ok()) throw new Error(`Create sender failed: ${senderRes.status()}`); + senderId = (await senderRes.json()).id; + + const receiverRes = await request.post('/api/persons', { + data: { firstName: 'A11y', lastName: `Receiver-${timestamp}` } + }); + if (!receiverRes.ok()) throw new Error(`Create receiver failed: ${receiverRes.status()}`); + receiverId = (await receiverRes.json()).id; + + const docRes = await request.post('/api/documents', { + multipart: { + title: 'A11y Test Brief', + documentDate: '1950-06-15', + senderId, + receiverIds: receiverId + } + }); + if (!docRes.ok()) throw new Error(`Create document failed: ${docRes.status()}`); + }); + for (const vp of VIEWPORTS) { for (const theme of THEMES) { test(`${vp.name} / ${theme} has no wcag2a/wcag2aa violations`, async ({ page }) => { await page.setViewportSize({ width: vp.width, height: vp.height }); await page.emulateMedia({ colorScheme: theme }); - await page.goto('/briefwechsel'); + await page.goto( + `/briefwechsel?senderId=${encodeURIComponent(senderId)}&receiverId=${encodeURIComponent(receiverId)}` + ); await page.waitForSelector('[data-hydrated]'); + // Assert we actually reached the row layout, not the hero — otherwise + // the axe sweep silently scans the wrong DOM. + await expect(page.getByTestId('conv-person-bar')).toBeVisible(); + const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa']) .include('main')