fix: add ARIA roles to leaderboard divs for screen reader accessibility (#171)

[5hivam123]

Description

Added proper ARIA roles to the leaderboard's div-based layout so screen readers can correctly interpret the grid structure. Since the leaderboard uses CSS Grid with <div> elements instead of native <table> markup, explicit ARIA roles are required for accessibility compliance.

Linked Issue

Fixes #171

Changes Made

• Added role="row" to .leaderboard-header
• Added role="columnheader" to each header cell div
• Added role="rowgroup" to #leaderboard-body
• Added role="row" to each leaderboard row in render.js
• Added role="cell" to each data cell in render.js

Type of Change

• Bug fix
• New feature
• UI/Visual update
• Documentation update
• Refactor

Testing

• Tested locally
• Tested on mobile viewport (if applicable)
• No console errors introduced

Checklist

• My code follows the project's coding style
• I have formatted my code locally by running npx prettier --write . before submitting
• I am submitting my PR from a dedicated feature/* branch, not the main branch
• I have performed a self-review of my code
• My changes generate no new warnings or errors
• I have updated documentation if required
• I have linked the relevant issue

Screenshots / Screen Recording

Verified using browser DevTools Accessibility Tree — leaderboard rows and headers are now correctly identified by screen readers.

[github-actions]

Thank you for submitting a pull request.

Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully.

Formatting and Branching

• Please confirm you have formatted your code locally using npx prettier --write ., or you can simply comment /format on this PR to have our bot do it for you!
• Ensure this PR is made from a feature/* branch and not main.

Note: This project is currently maintained by a solo maintainer, so reviews and responses may sometimes take a little time. Thanks for your patience.

[jagdish-15]

/format

[github-actions]

I have successfully run Prettier and pushed the formatting fixes to this PR.

Note for Contributors: Because this commit was pushed by a bot, GitHub will not automatically re-run the CI checks. To trigger them to pass, you must either:

• Push an empty commit locally (git commit --allow-empty -m "Trigger builds" and push)
• Close and immediately reopen this Pull Request.

[jagdish-15]

The PR description mentions adding columnheader and rowgroup roles as well, but in the current diff I'm only seeing the row and cell role additions inside render.js