Skip to content

As a user I want the navigation icons to show labels on hover so I can find features without guessing #155

@ChristopherRotnes

Description

@ChristopherRotnes

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

  • On desktop, hovering or focusing any nav icon shows a Carbon tooltip with the full translated label
  • Mobile layout is pixel-identical to today (no height or width change)
  • Active state (accent border + bg) is visually unchanged
  • Keyboard navigation works (tab + enter, tooltip visible on focus)
  • All three locales (nb, en, fa) show correct tooltip text
  • Settings → Utseende has a "Vis navigasjonsforklaringer" Carbon Toggle (default on)
  • Toggling it off removes tooltips immediately without page reload
  • The preference persists across sessions via localStorage key wl-nav-hints
  • npm test passes

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions