fix: improve chart toggle keyboard accessibility

[Payal-20-06]

Summary

Improved keyboard accessibility for the chart type toggle in ContributionGraph.

Changes Made
Added accessible button semantics for chart toggle controls
Added type="button" to prevent unintended form submissions
Added role="group" and aria-label="Chart type" to the toggle wrapper
Added aria-pressed state handling for active chart selection
Added visible keyboard focus styles using Tailwind focus ring utilities

Closes #46

---

Type of Change

Accessibility improvement

UI enhancement

---

Testing
Verified keyboard navigation using Tab key
Verified Enter and Space key interactions
Verified visible focus ring appears on focused toggle buttons
Confirmed chart switching functionality still works correctly

[vercel]

@Payal-20-06 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.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[Priyanshu-byte-coder]

The accessibility improvement is good, but there's one issue: focus:ring-indigo-500 is a raw Tailwind color — it breaks in light mode and won't follow the design system. Replace it with focus:ring-[var(--accent)] to stay consistent with the rest of the codebase.

[Priyanshu-byte-coder]

CSS variable violation blocks merge:

focus:ring-indigo-500 must use a CSS variable
indigo-500 is a hardcoded Tailwind color. All colors must use the design system variables. Please change to:

focus:ring-2 focus:ring-[var(--accent)]

Also remove the spurious blank line added between Area, and XAxis, in the import block.

[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!