diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts index 06ac90ab..c5b23944 100644 --- a/frontend/e2e/accessibility.spec.ts +++ b/frontend/e2e/accessibility.spec.ts @@ -37,6 +37,57 @@ test.describe('Accessibility — authenticated pages', () => { } }); +test.describe('Accessibility — dark mode (system preference)', () => { + for (const { name, path } of AUTHENTICATED_PAGES) { + test(`${name} page has no wcag2a/wcag2aa violations in prefers-color-scheme: dark`, async ({ + browser + }) => { + const context = await browser.newContext({ + colorScheme: 'dark', + storageState: 'e2e/.auth/user.json' + }); + const page = await context.newPage(); + await page.goto(path); + await page.waitForSelector('[data-hydrated]'); + + const results = await buildAxe(page).analyze(); + + if (results.violations.length > 0) { + const summary = results.violations + .map((v) => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} node(s))`) + .join('\n'); + console.log(`\nAccessibility violations on ${name} (dark/media):\n${summary}`); + } + + await context.close(); + expect(results.violations).toEqual([]); + }); + } +}); + +test.describe('Accessibility — dark mode (manual toggle)', () => { + for (const { name, path } of AUTHENTICATED_PAGES) { + test(`${name} page has no wcag2a/wcag2aa violations with data-theme='dark'`, async ({ + page + }) => { + await page.goto(path); + await page.waitForSelector('[data-hydrated]'); + await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark')); + + const results = await buildAxe(page).analyze(); + + if (results.violations.length > 0) { + const summary = results.violations + .map((v) => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} node(s))`) + .join('\n'); + console.log(`\nAccessibility violations on ${name} (dark/manual):\n${summary}`); + } + + expect(results.violations).toEqual([]); + }); + } +}); + test.describe('Accessibility — login page', () => { test.use({ storageState: { cookies: [], origins: [] } }); diff --git a/frontend/e2e/theme.spec.ts b/frontend/e2e/theme.spec.ts index 95b87392..037b9fcf 100644 --- a/frontend/e2e/theme.spec.ts +++ b/frontend/e2e/theme.spec.ts @@ -60,6 +60,34 @@ test.describe('Theme toggle', () => { await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark'); }); + test('color-scheme is dark when data-theme=dark is set', async ({ page }) => { + await page.goto('/'); + await page.waitForSelector('[data-hydrated]'); + + await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark')); + + const colorScheme = await page.evaluate( + () => getComputedStyle(document.documentElement).colorScheme + ); + expect(colorScheme).toBe('dark'); + }); + + test('color-scheme is dark in prefers-color-scheme: dark media', async ({ browser }) => { + const context = await browser.newContext({ + colorScheme: 'dark', + storageState: 'e2e/.auth/user.json' + }); + const page = await context.newPage(); + await page.goto('/'); + await page.waitForSelector('[data-hydrated]'); + + const colorScheme = await page.evaluate( + () => getComputedStyle(document.documentElement).colorScheme + ); + await context.close(); + expect(colorScheme).toBe('dark'); + }); + test('saved theme is applied before first paint (no flash)', async ({ page }) => { // Set dark theme in localStorage before navigating await page.goto('/');