Skip to content

feat(notification-bell): wrap icon button with accessible Tooltip primitive (Closes #763) - #871

Open
waterWang wants to merge 3 commits into
Predictify-org:mainfrom
waterWang:feat/notificationbell-tooltip-763
Open

feat(notification-bell): wrap icon button with accessible Tooltip primitive (Closes #763)#871
waterWang wants to merge 3 commits into
Predictify-org:mainfrom
waterWang:feat/notificationbell-tooltip-763

Conversation

@waterWang

Copy link
Copy Markdown

Description

Wraps NotificationBell's icon button with the shared Tooltip primitive to provide a hover/touch tooltip describing the notification state, as requested in issue #763.

Changes

  • src/pages/NotificationBell.tsx: Wrapped both the reduced-motion (static) and full-motion (animated) button branches with <Tooltip content={ariaLabel} placement="bottom">. The tooltip shows the same accessible label text (e.g. "Notifications — 5 unread" or "Notifications") on hover, focus, or long-press.
  • src/pages/NotificationBell.tooltip.test.tsx: 2 tests covering:
    • Tooltip trigger with unread count (accessible label match)
    • Tooltip trigger without unread notifications

Testing

  • npx jest src/pages/NotificationBell.tooltip — 2/2 passing
  • ✅ TypeScript compilation — no errors
  • ✅ Existing NotificationBell tests unaffected

Closes #763

@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tooltip primitive usage on NotificationBell icon buttons [b#029]

1 participant