feat: add descriptive tooltips to StreakTracker stat cards

[srinidhi-2006-bit]

Summary

Added descriptive tooltips and accessible info indicators to StreakTracker stat cards to improve usability and accessibility for new users.

Closes #205

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Added tooltip descriptions for streak statistics
• Added accessible info icons beside stat labels
• Added keyboard-focus accessible tooltip behavior
• Maintained lightweight implementation without adding dependencies

How to Test

1. Open the StreakTracker widget
2. Hover over the info icon beside each stat label
3. Verify tooltip descriptions appear correctly
4. Navigate using keyboard Tab key
5. Confirm layout remains visually consistent

Screenshots (if UI change)

N/A

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@srinidhi-2006-bit is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Priyanshu-byte-coder]

Good idea — tooltips on stat cards help users understand the metrics. One fix needed:

Remove the @heroicons/react dependency and replace with an inline SVG info icon — adding a full icon library for a single icon is too much overhead:

<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
  <circle cx="12" cy="12" r="10" />
  <line x1="12" y1="16" x2="12" y2="12" />
  <line x1="12" y1="8" x2="12.01" y2="8" />
</svg>

Also fix the indentation on the new div (it's shifted relative to the surrounding code).

Push once updated — will merge.

[srinidhi-2006-bit]

Removed the @heroicons/react dependency and replaced the tooltip icon with an inline SVG to reduce unnecessary bundle overhead.

Also fixed the indentation/alignment issue in the tooltip section and pushed the updated changes. Thank you for the review!

[Priyanshu-byte-coder]

SVG inline approach is correct — heroicons dependency removed. One bug and one nit:

Bug: <button> with no onClick
The info icon (ⓘ) button has no click handler — it just shows a title tooltip on hover. A <button> with no action is semantically wrong and confusing for keyboard users (pressing Enter/Space does nothing). Change to a non-interactive element:

<span
  aria-hidden="true"
  title={stat.tooltip}
  className="text-[var(--muted-foreground)] hover:text-[var(--accent)] cursor-help"
>
  <svg .../>
</span>

The tooltip text is already readable by screen readers via the parent div's aria-label.

Nit: indentation
The moved <div className="text-xl mb-1" ...\> is now at 10 spaces instead of 12 (same as surrounding elements). Align to match.

[Priyanshu-byte-coder]

1. <button> with no onClick is wrong semantic — if the element is decorative/tooltip-only, use <span> instead. A button that does nothing on click is an accessibility violation.

2. Duplicate tooltip — title={stat.tooltip} is already on the parent card div. Adding it again on the nested button causes inconsistent browser behavior. Remove it from the button.

3. Indentation regression — <div className="text-xl mb-1"> is outdented 2 spaces relative to its siblings. Fix to match surrounding code.

[srinidhi-2006-bit]

Updated all requested changes:

• Replaced the non-functional button with a semantic span element
• Removed duplicate tooltip attributes
• Fixed indentation alignment issues
• Synced branch with latest main changes

Also verified lint and type-check pass locally. Thanks for the review!

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!

[srinidhi-2006-bit]

Hi @Priyanshu-byte-coder

Thank you for merging the PR.

I noticed that the gssoc:approved label is currently missing from the PR. Could you please add it so the contribution can be counted under GSSoC'26?

Thank you!