mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
The "Skip to content" link is `position: fixed; top-2 left-2 z-[100]` on every authenticated page. Even with `opacity-0` it still occupied its bounding box, so a mouse click on the desktop logo (also at the top-left corner) sometimes hit the invisible link instead. Fix: keep the visual treatment (opacity, focus styles) but combine `pointer-events-none` + `-translate-y-full` in the unfocused state so the element neither receives clicks nor occupies any visible space. On focus, both modifiers reverse — the link slides into view and becomes interactive again. Existing keyboard flow is unchanged: Tab focuses the link, the focus ring + translucent slide-in is preserved. Tests: extend `e2e/a11y.spec.ts` with a Playwright check that the desktop logo is clickable from its centre on the dashboard and the URL stays at "/". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>