Summary
The top header nav uses six icon-only buttons. While aria-labels exist (already translated in all three locales), sighted users on desktop get no visual hint about what each icon does. Icons like RecentlyViewed, Book, and EventSchedule are not universally understood in a workout context. On desktop we should show a Carbon tooltip on hover/focus for each nav button. Mobile layout is unchanged (icon-only; labels would consume too much vertical space). A Settings toggle lets power users disable tooltips once they know the app.
Priority
Medium
UI spec (Carbon g100)
- Desktop (>500 px via
useIsMobile()):
- Wrap each
NavBtn in Carbon Tooltip (from @carbon/react) with align="bottom"
- Tooltip label = existing
t("nav.*") string (already translated in nb/en/fa)
NavBtn uses React.forwardRef + ...rest spread so Carbon can inject its event handlers
- When Settings toggle is off: no Tooltip wrapper rendered (NavBtn bare, as today)
- Mobile (≤500 px): no change — icon-only layout unchanged, zero height/width impact
- Settings → Utseende: Carbon
Toggle "Vis navigasjonsforklaringer" (default: on)
- Persisted to
localStorage key wl-nav-hints
- Change takes effect immediately without page reload
Data model
N/A — no database changes.
Acceptance criteria
Out of scope
- Labels on mobile
- Changing icon choices
- Moving nav to a bottom tab bar
- Any new translation keys (existing
nav.* keys are sufficient for tooltips)
Summary
The top header nav uses six icon-only buttons. While aria-labels exist (already translated in all three locales), sighted users on desktop get no visual hint about what each icon does. Icons like
RecentlyViewed,Book, andEventScheduleare not universally understood in a workout context. On desktop we should show a Carbon tooltip on hover/focus for each nav button. Mobile layout is unchanged (icon-only; labels would consume too much vertical space). A Settings toggle lets power users disable tooltips once they know the app.Priority
Medium
UI spec (Carbon g100)
useIsMobile()):NavBtnin CarbonTooltip(from@carbon/react) withalign="bottom"t("nav.*")string (already translated in nb/en/fa)NavBtnusesReact.forwardRef+...restspread so Carbon can inject its event handlersToggle"Vis navigasjonsforklaringer" (default: on)localStoragekeywl-nav-hintsData model
N/A — no database changes.
Acceptance criteria
localStoragekeywl-nav-hintsnpm testpassesOut of scope
nav.*keys are sufficient for tooltips)