[Bug]: Leaderboard, Profile, and Friends pages lack keyboard navigation and ARIA labeling, making core flows unusable via screen reader or keyboard-only input

[Priyanka0205-CSE]

Bug Description

Description

Interactive elements across Leaderboard.jsx, Profile.jsx, and Friends.jsx (badge unlock modal, follow/unfollow buttons, leaderboard row expand, theme toggle) are implemented as <div onClick> rather than semantic <button>/<a> elements, with no aria-label, role, or focus management. Modals (mascot shop, badge details) don't trap focus while open or restore focus to the triggering element on close.

Steps to Reproduce

1. Try navigating the Leaderboard, Profile, or Friends page using only Tab/Enter (no mouse)
2. Try opening the badge details or mascot shop modal and pressing Tab repeatedly
3. Try using a screen reader (e.g. NVDA/VoiceOver) on the follow/unfollow and theme-toggle icon buttons

Expected Behavior

• All clickable elements are reachable and operable via keyboard (Tab to focus, Enter/Space to activate)
• Icon-only controls (follow, sync, theme toggle) have descriptive aria-labels
• Modals trap focus while open and restore it to the triggering element on close
• Screen readers announce meaningful labels for interactive elements

Actual Behavior

• Clickable <div>s are not focusable and have no keyboard event handlers
• Icon buttons have no accessible name, so screen readers announce nothing useful
• Focus is not trapped inside modals — Tab moves focus to elements behind the modal
• Closing a modal does not return focus to the element that opened it

Impact

A keyboard-only or screen-reader-dependent user currently cannot complete onboarding, follow another user, or view badge details — this is a full accessibility blocker for core app flows, not a minor polish item.

Scope

• Convert clickable <div>s to semantic <button>/<a>, or add role="button" + tabIndex={0} + keydown handlers
• Add aria-label to all icon-only controls
• Implement focus trap + focus restoration for all modals (badge details, mascot shop, etc.)
• Ensure leaderboard rows and badge grid support Tab/Enter navigation

[github-actions]

Thank you for opening this issue, @Priyanka0205-CSE! 🚀

A maintainer (@indresh404) will review this and assign it to you if the issue is valid. Please wait for assignment before you start working on it!

Happy contributing! 🌟

[Priyanka0205-CSE]

/assign

[github-actions]

Hey @Priyanka0205-CSE! This issue has been assigned to you. 🎉

Please go through our Contributing Guide before you start. Make sure to open a PR that references this issue (e.g. Closes #640).

Happy contributing! 🚀