Added tooltips to dashboard navigation icons and logout button for improved accessibility

[Riyanshverma]

Closes #222

📝 Description

This pull request adds visible tooltips to all dashboard navigation icons and the logout button. This improves accessibility and usability by providing clear labels on hover, making navigation easier for all users, especially in cases where icon meaning is not obvious.

🔧 Changes Made

• Added title and aria-label attributes to all dashboard navigation icon links.
• Added title and aria-label to the logout button.
• Updated the user avatar menu button to include a tooltip for clarity.
• Ensured tooltips are consistent across light and dark modes.
• Kept existing sr-only labels for screen reader accessibility.

📷 Screenshots or Visual Changes (if applicable)

Tooltips now appear when hovering over navigation icons and the logout button in the dashboard header.

🤝 Collaboration

Collaborated with: N/A

✅ Checklist

• I have read the contributing guidelines.
• I have added tests that prove my fix is effective or that my feature works.
• I have added necessary documentation (if applicable).
• Any dependent changes have been merged and published in downstream modules.

Summary by CodeRabbit

• Accessibility Improvements
  • Improved screen reader support across the application by adding descriptive labels and titles to navigation links, user menu controls, and logout buttons. These enhancements provide better context for users utilizing assistive technologies throughout the interface.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This pull request adds accessibility attributes (title and aria-label) to navigation links and buttons across five frontend components. The changes provide tooltips on hover and improved screen reader support for dashboard navigation and user menu elements without modifying any functional behavior or control flow.

Changes

Cohort / File(s)	Summary
Accessibility Enhancements: Navigation & User Menu Frontend/src/components/user-nav.tsx, Frontend/src/pages/CollaborationDetails.tsx, Frontend/src/pages/Collaborations.tsx, Frontend/src/pages/DashboardPage.tsx, Frontend/src/pages/Messages.tsx	Adds title and aria-label attributes to navigation Links and user menu button. Link elements now include title={label} and aria-label={label} for tooltip display and screen reader support. User menu button receives title and aria-label for accessibility. No functional behavior changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• All changes follow the same repetitive pattern (attribute additions only)
• No logic modifications or behavioral changes
• Straightforward accessibility enhancement across homogeneous file set

Poem

🐰 A rabbit hops through nav so bland,
Adding titles, aria labels grand,
Tooltips bloom where icons once stood dark,
Accessibility's a welcome spark! ✨
Screen readers cheer, users see the way,
Clearer navigation saves the day! 🎉

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding tooltips to dashboard navigation icons and logout button for accessibility.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #222: adds title and aria-label attributes to dashboard navigation links and logout button for tooltip accessibility.
Out of Scope Changes check	✅ Passed	All changes are directly related to issue #222 requirements; modifications are limited to adding accessibility attributes (title and aria-label) across navigation components.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a3be437 and 50b76fc.

📒 Files selected for processing (5)

• Frontend/src/components/user-nav.tsx (1 hunks)
• Frontend/src/pages/CollaborationDetails.tsx (2 hunks)
• Frontend/src/pages/Collaborations.tsx (1 hunks)
• Frontend/src/pages/DashboardPage.tsx (2 hunks)
• Frontend/src/pages/Messages.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

Frontend/src/pages/DashboardPage.tsx (1)

Frontend/src/components/ui/button.tsx (1)

• Button (54-54)

Frontend/src/components/user-nav.tsx (1)

Frontend/src/components/ui/button.tsx (1)

• Button (54-54)

🔇 Additional comments (3)

Frontend/src/pages/CollaborationDetails.tsx (1)

340-343: LGTM! Accessibility enhancement aligns with PR objectives.

The addition of title and aria-label attributes successfully provides tooltips on hover and improves screen reader support. The title attribute delivers the native browser tooltip requested in issue #222, while aria-label ensures consistent accessible labeling.

Note: The aria-label attribute is technically redundant with the existing sr-only span (line 342), as both serve the same purpose for screen readers. However, this redundancy is harmless and provides defensive accessibility coverage.

Frontend/src/components/user-nav.tsx (1)

41-50: LGTM! Essential accessibility improvement for icon-only button.

The addition of title and aria-label attributes to the user menu trigger button is well-implemented. Unlike the navigation links in other files, this button has no visible text or sr-only label, making the aria-label essential (not redundant) for screen reader users to understand the button's purpose.

Frontend/src/pages/DashboardPage.tsx (1)

71-73: LGTM! Essential accessibility for icon-only logout button.

The title and aria-label attributes are properly implemented for the logout button. Since this is an icon-only button without visible text or sr-only label, the aria-label is essential for screen reader users to identify the button's purpose. The title provides the requested tooltip functionality.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}