Fix WCAG AA contrast on active filter chips (History + Report)

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to Workout Lens are documented here.
 
+## [1.5.15] — 2026-05-19
+
+### Accessibility
+- **Fix WCAG AA contrast on active filter chips (History + Report)** — active chips used `#ee2c80` (magenta) fill with white text at 3.95:1, failing WCAG AA for normal text (requires 4.5:1). Added `--accent-active: #b5116a` token (~6:1 with white) to `carbon-tokens.css` and updated the active chip `background` and `borderColor` in `History.jsx` and the `FilterChip` component in `Report.jsx` to use it.
+
 ## [1.5.14] — 2026-05-17
 
 ### Developer / Infrastructure

CLAUDE.md

@@ -106,7 +106,7 @@ Uses `@carbon/react` and `@carbon/icons-react`. IBM Plex fonts (Sans, Mono, Seri
 - `Home.jsx` → `SectionLabel` + `PageHeading` headings; last session card with gym-class identity hero; 7-day weekly strip with heat colors — clicking a day that has a session navigates to History pre-selected on that date; `fetchThisWeekSessions` in `db.js`
 - `Report.jsx` → `SectionLabel` eyebrow with period + active day filters on two separate `display:block` spans; three separate `flexWrap: wrap` filter rows (period / weekdays / session types) with `1px solid var(--border-subtle-wl)` top borders between groups; "Nullstill filter" always rendered (opacity-toggled); KPI tiles → heatmap body → hover detail → heat legend → frequency table → gap callout card (with `AccentChip` per untrained muscle) → recommendation button → recs list; when all primary muscles trained shows positive fallback message; when some muscles secondary-only shows those as blue tags; recommendation rows have 3px accent left strip + round `+` button that saves the exercise inline via `saveLibraryExercise`; "Oppdater anbefalinger" ghost button (`Renew` icon) below the recs list — re-runs Claude call and overwrites the cache entry; no `StickyCta`; recs are persisted in the shared `recommendation_cache` Supabase table (see data model) and restored on mount/filter-change via `fetchRecsCache`; prefill prop applied on mount via `useRef` — supports `periodDays`, `selectedDays`, `selectedTypes`, `weekday`, `sessionType`; `KpiTile` (42px Plex Light value); `muscleLastDate` in useMemo
 - `PageShell.jsx` → exports: `SectionLabel` (mono 12px, 0.16em tracking, 3px `var(--accent)` left border; accepts optional `renderIcon` prop — renders the Carbon icon at 14px before the label text), `PageHeading` (Cond 700 28px), `PageTitle` (alias for SectionLabel), `AccentChip` (magenta pill: `var(--accent-bg-14)` bg, `var(--accent-soft)` text), `StickyCta` (sticky bottom bar with top border), `BackButton`; `NavBtn` is a `forwardRef` component accepting `l1` and `l2` props — renders a 2-line Plex Condensed (8px) label below the icon; nav bar height is 56px; nav icons in order: Camera → RecentlyViewed → Analytics → EventSchedule (Planlegger) → Notebook (Sett-sammen) → Settings — 6 icons each 48px wide; theme toggle and logout removed from header (now in Settings view); `ChangelogModal` no longer rendered here. `useNavHints` moved to `app/src/lib/hooks.js` (issue #253)
-- `carbon-tokens.css` → added `--heat-1..5` green scale (#044317 → #42be65); WL custom tokens: `--accent` (#ee2c80 magenta), `--surface-card`, `--border-subtle-wl`, `--text-muted-wl`, `--accent-bg-08/14/30`, `--accent-soft`, `--r-card` (16px), `--r-pill` (999px), `--r-tile` (10px), `--cond` (IBM Plex Sans Condensed), `--exercise` (#7af2a4 green, g10 override #1a8c4e), `--exercise-soft` (rgba 12%), `--exercise-mid` (rgba 35%); g10 light-mode overrides for all WL tokens
+- `carbon-tokens.css` → added `--heat-1..5` green scale (#044317 → #42be65); WL custom tokens: `--accent` (#ee2c80 magenta), `--accent-hover` (#d9246f), `--accent-active` (#b5116a — WCAG AA safe with white text ~6:1; use for filled active/selected states), `--surface-card`, `--border-subtle-wl`, `--text-muted-wl`, `--accent-bg-08/14/30`, `--accent-soft`, `--r-card` (16px), `--r-pill` (999px), `--r-tile` (10px), `--cond` (IBM Plex Sans Condensed), `--exercise` (#7af2a4 green, g10 override #1a8c4e), `--exercise-soft` (rgba 12%), `--exercise-mid` (rgba 35%); g10 light-mode overrides for all WL tokens
 - `app.css` → global `html, body { overflow-x: hidden }` to prevent horizontal viewport bleed from chip rows; do not use `overflow: hidden` on direct parents of `flexWrap: wrap` chip containers — it clips instead of scrolling
 ### Hard rules (must not regress)
 - **Sentence case** for all labels — `Add exercise`, not `Add Exercise`

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "workout-lens",
   "private": true,
-  "version": "1.5.14",
+  "version": "1.5.15",
   "author": "Christopher Rotnes",
   "license": "MIT",
   "repository": {

app/src/components/History.jsx

@@ -359,8 +359,8 @@ export default function History({ initialDate }) {
                     padding: "5px 13px",
                     borderRadius: "var(--r-pill)",
                     border: "1px solid",
-                    borderColor: active ? "var(--accent)" : "var(--border-subtle-wl)",
-                    background: active ? "var(--accent)" : "transparent",
+                    borderColor: active ? "var(--accent-active)" : "var(--border-subtle-wl)",
+                    background: active ? "var(--accent-active)" : "transparent",
                     color: active ? "#fff" : "var(--text-muted-wl)",
                     fontFamily: "var(--cds-font-mono)",
                     fontSize: 11,

app/src/components/Report.jsx

@@ -23,8 +23,8 @@ function FilterChip({ label, active, onClick }) {
         letterSpacing: "0.06em",
         textTransform: "uppercase",
         border: "1px solid",
-        borderColor: active ? "var(--accent)" : "var(--border-subtle-wl)",
-        background: active ? "var(--accent)" : "transparent",
+        borderColor: active ? "var(--accent-active)" : "var(--border-subtle-wl)",
+        background: active ? "var(--accent-active)" : "transparent",
         color: active ? "#fff" : "var(--text-muted-wl)",
         cursor: "pointer",
         borderRadius: "var(--r-pill)",

app/src/styles/carbon-tokens.css

@@ -390,6 +390,7 @@
   /* Accent — magenta */
   --accent:          #ee2c80;
   --accent-hover:    #d9246f;
+  --accent-active:   #b5116a;
   --accent-soft:     #ff7eb6;
   --accent-bg-08:    rgba(238,44,128,.08);
   --accent-bg-14:    rgba(238,44,128,.14);