fix(dark-mode): address PR #168 review blockers
Some checks failed
CI / Unit & Component Tests (pull_request) Has been cancelled
CI / Backend Unit Tests (pull_request) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (push) Has been cancelled

- AuthHeader: bg-brand-navy → bg-header (semantic token, responds to dark mode)
- header.spec.ts: add forgot-password AuthHeader tests (bg + axe)
- header.spec.ts: fix BRAND_NAVY comment — references --c-header, not --c-primary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #168.
This commit is contained in:
Marcel
2026-03-31 13:30:00 +02:00
parent 12b8324245
commit f70b5ae6bd
2 changed files with 24 additions and 2 deletions

View File

@@ -1,7 +1,7 @@
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
// #012851 — brand-navy, defined as --c-primary in layout.css
// #012851 — brand-navy, set as --c-header in layout.css (both light and dark mode)
const BRAND_NAVY = 'rgb(1, 40, 81)';
test.describe('Header — brand-navy background', () => {
@@ -94,3 +94,25 @@ test.describe('Login page — AuthHeader', () => {
expect(results.violations).toEqual([]);
});
});
test.describe('Forgot-password page — AuthHeader', () => {
test.use({ storageState: { cookies: [], origins: [] } });
test('forgot-password page has brand-navy header', async ({ page }) => {
await page.goto('/forgot-password');
const header = page.locator('header');
await expect(header).toBeVisible();
const bg = await header.evaluate((el) => getComputedStyle(el).backgroundColor);
expect(bg).toBe(BRAND_NAVY);
});
test('forgot-password page header passes accessibility audit', async ({ page }) => {
await page.goto('/forgot-password');
await expect(page.locator('header')).toBeVisible();
const results = await new AxeBuilder({ page }).include('header').analyze();
expect(results.violations).toEqual([]);
});
});

View File

@@ -2,7 +2,7 @@
import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
</script>
<header class="bg-brand-navy">
<header class="bg-header">
<div class="h-1 bg-accent"></div>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-12 items-center justify-between">