mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 04:32:42 +00:00
Marc-André BombeckandClaude Opus 4.7
a2e24b1240
Multiple accessibility + visual defects on `<InsightsSectionNav>`: - No `aria-current` on the active tab — screen readers had no signal the active section had changed. - No `:focus-visible` ring — `transition-colors` only animated the background, leaving keyboard focus invisible against `bg-primary/10`. - Unconditional `scroll-smooth` ignored `prefers-reduced-motion`. - `bg-background/80` let the hero gradient bleed through. - `-mx-4` carried the bar past the safe horizontal-scroll boundary on 280 px Galaxy Fold; combined with the inner `overflow-x-auto` it produced a ghost scrollbar. - 112 px `scroll-mt-28` was ~2.5× the actual sticky-strip height (~40-44 px), pushing target headings well below the viewport top. - IntersectionObserver picked the last entry in the batch instead of the highest intersectionRatio, so the active pill jumped during fast scrolls. Add `aria-current="location"`, focus-visible ring, motion-reduce gate around `scrollIntoView`, swap `bg-background/80` for `/95 backdrop-blur`, drop the negative margin (the parent handles horizontal padding), hide the inner scrollbar, ratio-sort the observer entries, and tune `scroll-mt-28` → `scroll-mt-16` on all seven sections. Add `insights.navAriaLabel` (EN: "Skip to section", DE: "Zu Abschnitt springen"). Closes Design-H1, Design-H3, Code-MED-4, Design-LOW-4. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>