test(a11y): add dark mode axe + color-scheme tests for issue #166
Two failing test suites that encode the regressions this issue fixes: - accessibility.spec.ts: axe wcag2aa in both prefers-color-scheme:dark and data-theme='dark' — fails because --c-ink-3:#6b7280 on #1a1a1a = 3.2:1 - theme.spec.ts: color-scheme computed property is 'dark' in dark mode — fails because neither dark CSS block sets color-scheme: dark Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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.describe('Accessibility — login page', () => {
|
||||||
test.use({ storageState: { cookies: [], origins: [] } });
|
test.use({ storageState: { cookies: [], origins: [] } });
|
||||||
|
|
||||||
|
|||||||
@@ -60,6 +60,34 @@ test.describe('Theme toggle', () => {
|
|||||||
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
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 }) => {
|
test('saved theme is applied before first paint (no flash)', async ({ page }) => {
|
||||||
// Set dark theme in localStorage before navigating
|
// Set dark theme in localStorage before navigating
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
|
|||||||
Reference in New Issue
Block a user