Enhance Heatmap Accessibility with Keyboard Navigation and ARIA Support

[nishtha-agarwal-211]

Description

Fixes #8303

Add full keyboard accessibility and screen reader support to contribution heatmap grid cells in Heatmap.tsx and ActivityHeatmapPro.tsx:

• Enable keyboard cell navigation using ArrowUp, ArrowDown, ArrowLeft, and ArrowRight arrow keys.
• Add an aria-live="polite" announcement region that reads cell date and commit count details when focused.
• Add WCAG AAA compliant focus outline rings (focus:ring-2 focus:ring-emerald-500) matching active theme color palette.
• Add comprehensive Vitest unit tests covering keyboard arrow navigation and screen reader live region announcements.

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

• Keyboard Navigation: Pressing arrow keys (ArrowUp, ArrowDown, ArrowLeft, ArrowRight) moves focus across cells seamlessly.
• Screen Reader Announcements: aria-live="polite" updates with text like "5 contributions on Jan 1, 2024" on focus.
• Focus Rings: High-contrast emerald focus ring outlines visible on keyboard focus for WCAG AAA compliance.

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@nishtha-agarwal-211 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[retenta-bot]

This pull request significantly enhances the accessibility of the heatmap component by implementing keyboard navigation and ARIA support, which aligns with our previous decision to enhance customizer accessibility. The addition of comprehensive unit tests also ensures that these features are well-covered. Thank you for your contribution, and I look forward to your updates!

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

Asset	PR Size	Base Size	Difference	Status
static/chunks/1925-[hash].js	-	2.17 KB	-2.17 KB (-100.00%)	🗑️ Deleted
static/chunks/2759-[hash].js	165.15 KB	-	+165.15 KB (++100%)	🆕 New
static/chunks/4116-[hash].js	-	2.54 KB	-2.54 KB (-100.00%)	🗑️ Deleted
static/chunks/4305-[hash].js	16.73 KB	16.47 KB	+0.26 KB (+1.58%)	🔴 Regression
static/chunks/4885-[hash].js	2.68 KB	-	+2.68 KB (++100%)	🆕 New
static/chunks/498-[hash].js	-	5.56 KB	-5.56 KB (-100.00%)	🗑️ Deleted
static/chunks/5366-[hash].js	3.15 KB	-	+3.15 KB (++100%)	🆕 New
static/chunks/5894-[hash].js	3.36 KB	-	+3.36 KB (++100%)	🆕 New
static/chunks/6595-[hash].js	-	5.06 KB	-5.06 KB (-100.00%)	🗑️ Deleted
static/chunks/6995-[hash].js	5.67 KB	-	+5.67 KB (++100%)	🆕 New
static/chunks/7704-[hash].js	2.67 KB	2.50 KB	+0.17 KB (+6.76%)	🔴 Regression
static/chunks/8002-[hash].js	-	52.58 KB	-52.58 KB (-100.00%)	🗑️ Deleted
static/chunks/8083-[hash].js	5.08 KB	-	+5.08 KB (++100%)	🆕 New
static/chunks/8117-[hash].js	-	5.66 KB	-5.66 KB (-100.00%)	🗑️ Deleted
static/chunks/8277-[hash].js	50.47 KB	-	+50.47 KB (++100%)	🆕 New
static/chunks/9376-[hash].js	5.59 KB	-	+5.59 KB (++100%)	🆕 New
static/chunks/9433-[hash].js	-	6.21 KB	-6.21 KB (-100.00%)	🗑️ Deleted
static/chunks/9822-[hash].js	2.66 KB	2.52 KB	+0.14 KB (+5.75%)	🔴 Regression
static/chunks/app/(root)/dashboard/[username]/page-[hash].js	54.34 KB	54.03 KB	+0.31 KB (+0.57%)	🔴 Regression
static/chunks/app/(root)/dashboard/[username]/wrapped/page-[hash].js	3.26 KB	3.12 KB	+0.14 KB (+4.54%)	🔴 Regression
static/chunks/app/burnout-analyzer/page-[hash].js	11.60 KB	13.10 KB	-1.50 KB (-11.43%)	🟢 Improvement
static/chunks/app/documentation/page-[hash].js	1.97 KB	1.83 KB	+0.14 KB (+7.41%)	🔴 Regression
static/chunks/app/guidelines/page-[hash].js	4.44 KB	4.27 KB	+0.17 KB (+4.10%)	🔴 Regression
static/chunks/app/layout-[hash].js	15.26 KB	13.69 KB	+1.57 KB (+11.50%)	🔴 Regression
static/chunks/e2ce8796-[hash].js	38.90 KB	-	+38.90 KB (++100%)	🆕 New
static/css/[hash].css	41.99 KB	41.95 KB	+0.05 KB (+0.11%)	🔴 Regression

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	4834.78 KB	4052.50 KB	+782.28 KB (+19.30%)
Total CSS	339.74 KB	338.94 KB	+0.80 KB (+0.24%)

[Aamod007]

Comprehensive accessibility enhancement for the heatmap components. The keyboard navigation (arrow keys, Enter/Space for toggling), ARIA labels, focus management, and the dedicated accessibility test file show thorough attention to inclusive design.

CI is failing — please check the logs and push fixes.

Labels: level:advanced (7 files, 783 lines, multi-component a11y overhaul), quality:clean, type:feature, type:accessibility, type:testing, mentor:Aamod007

[Aamod007]

Re-reviewing after noting the only CI failure is Vercel authorization (not code-related). All other checks (Format · Lint · Typecheck · Test, Production Build, CodeQL) pass. Approving — the Vercel deploy auth is a repo-level config issue, not a code problem.