jacobh2
d14f86478a
New token system in global.css (near-white surfaces, one ink-blue accent, no sub-12px type), self-hosted Schibsted Grotesk, rewritten primitives (buttons, fields, modal shell, segmented, disclosure, skeleton), a borderless 56px header with an SV | EN language toggle, an Icon component replacing glyphs, page skeletons that keep the layout during loading, and leave-type colours moved out of TS into CSS variables. Feature blocks keep their structure for later phases. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
/**
|
|
* Regression for a specificity bug: `.header__nav-link:hover` (a class +
|
|
* pseudo-class, specificity (0,2,0)) once outranked the single-class active
|
|
* rule, so hovering the *active* tab reverted its background to the ghost
|
|
* hover colour while keeping the active text colour — unreadable.
|
|
* `.header__nav-link[aria-current='page']:hover` now wins on specificity
|
|
* (attribute selector + pseudo-class, (0,2,0)) over the plain hover rule and
|
|
* keeps the active link on its accent tint (`--c-accent-weak`) with the
|
|
* darker accent text (`--c-accent-hover`). The active state is marked by
|
|
* `aria-current="page"` (set automatically by react-router-dom when the
|
|
* route matches). See `header.css`.
|
|
*/
|
|
import { test, expect, type Page } from '@playwright/test'
|
|
|
|
/**
|
|
* Resolves a CSS custom property (declared on :root in styles/global.css) to
|
|
* the computed `rgb(...)` string the browser would report for an element
|
|
* actually painted with it — see the identical helper (and its rationale)
|
|
* in `red-days.spec.ts`.
|
|
*/
|
|
async function resolveCssVar(page: Page, varName: string): Promise<string> {
|
|
return page.evaluate((name) => {
|
|
const probe = document.createElement('div')
|
|
probe.style.backgroundColor = `var(${name})`
|
|
probe.style.color = `var(${name})`
|
|
document.body.appendChild(probe)
|
|
const style = getComputedStyle(probe)
|
|
const resolved = style.backgroundColor
|
|
probe.remove()
|
|
return resolved
|
|
}, varName)
|
|
}
|
|
|
|
test.describe('header nav — active tab stays readable on hover', () => {
|
|
test('hovering the active nav link keeps the text readable', async ({ page }) => {
|
|
await page.goto('/')
|
|
const activeLink = page.getByTestId('header-nav').getByRole('link', { name: 'Översikt' })
|
|
await expect(activeLink).toHaveAttribute('aria-current', 'page')
|
|
|
|
const accentWeak = await resolveCssVar(page, '--c-accent-weak')
|
|
const accentHover = await resolveCssVar(page, '--c-accent-hover')
|
|
|
|
await activeLink.hover()
|
|
|
|
await expect(activeLink).toHaveCSS('background-color', accentWeak)
|
|
await expect(activeLink).toHaveCSS('color', accentHover)
|
|
})
|
|
})
|