[Frontend/Accessibility] Migrate Leaderboard Grid to Semantic `<table>` Element

[rishab11250]

Description

The leaderboard in frontend/leaderboard.html currently uses a <div>-based grid layout to display rankings. While this renders visually, it completely breaks screen reader navigation — users relying on assistive technology cannot perceive row/column relationships, sort directions, or rank positions.

Additionally, the page has no <h1> heading and the title is only set via JavaScript (document.title), which means the page appears untitled before JS executes.

---

Proposed Solution

1. Replace the <div> grid with a proper <table> structure:

   • <table> with <thead> containing <th> elements for Rank, Name, Score, etc.
   • <tbody> where each row is a <tr> with <td> cells.
   • Add role="columnheader" and aria-sort attributes to sortable columns.
   • Add scope="col" / scope="row" for proper header associations.

2. Add a visible <h1> heading above the table (e.g., "Leaderboard").

3. Preserve all existing visual styling:

   • Migrate existing CSS from .leaderboard-grid, .leaderboard-row etc. to table, th, td, tr selectors.
   • Maintain the rank badges, avatar, score formatting exactly as-is.

4. Ensure keyboard navigation works:

   • Rows remain focusable via tabindex="0" or native <tr> focus if needed.
   • Sort controls in <th> are <button> elements (not divs with click handlers).

---

Acceptance Criteria

• Leaderboard renders as a semantic <table> in the DOM (verify via DevTools).
• Screen reader announces column headers when navigating rows.
• Visual appearance is identical to the current <div> grid.
• Sort controls remain functional with keyboard (Enter/Space).
• A visible <h1> heading exists on the page.
• No JavaScript errors or regressions in search/filter behavior.
• Mobile responsive layout is preserved.

---

Affected Files

• frontend/leaderboard.html
• frontend/css/main.css
• frontend/js/render.js (may need minor selector updates)

[github-actions]

Thank you for opening an issue.

Please review our CONTRIBUTING.md guidelines before getting started.

A maintainer will review this issue shortly. If you would like to work on the issue yourself, please leave a comment requesting assignment.

Issue Assignment Policy

• The issue creator is given the first priority to work on their issue.
• If the creator declines or does not request assignment, the issue will be assigned to others in the order of requests received.
• Please do not submit PRs or begin work until you are officially assigned.

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

[rishab11250]

I want to work on this

[jahnavigu]

Hi @codepvg, I am a GSSoC 2026 contributor! This accessibility migration is a fantastic improvement for screen readers. If the author decides to pass on it, I would love to be considered for assignment to refactor the grid into a semantic table layout and ensure the ARIA sorting attributes work seamlessly.