Enhance Customizer Accessibility with Keyboard Navigation and ARIA Support

[nishtha-agarwal-211]

Description

Enhances customizer controls (app/customize/ and components/) with WCAG 2.1 AA compliant accessibility and keyboard navigation:

• ARIA Radio Group Semantics: Added role="radiogroup" and aria-label="Theme presets" to theme preset containers, and role="radio", aria-checked, aria-pressed, and tabIndex={0} attributes to theme tile buttons.
• Keyboard Arrow Navigation: Supported ArrowRight, ArrowLeft, ArrowUp, ArrowDown, Home, and End keys to cycle through available themes and update focus.
• Live Region Announcements: Added an aria-live="polite" status region (role="status") announcing applied theme preset changes to screen readers.
• Visible Focus Indicators: Added focus-visible:ring-2 focus rings across interactive theme buttons, selects, inputs, and color pickers.
• Test Coverage: Added targeted unit tests and updated customizer test suites (518 tests passing, npm run typecheck clean).

Fixes #8244

Pillar

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

Visual Preview

Keyboard focus rings and screen reader live announcements enabled on /customize theme preset tiles and color picker controls.

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 customizer controls, aligning with WCAG 2.1 AA standards. It introduces ARIA roles and keyboard navigation, which are crucial for users relying on assistive technologies. Additionally, the inclusion of live region announcements will improve the experience for screen reader users. This aligns with our previous decisions to enhance testing and responsiveness in components, as seen in the recent updates to the ControlsPanel and ThemeSelector components. Thank you for your contributions, and I look forward to your continued work on improving our accessibility standards!

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

Asset	PR Size	Base Size	Difference	Status
static/chunks/app/customize/page-[hash].js	21.16 KB	20.88 KB	+0.28 KB (+1.34%)	🔴 Regression
static/chunks/app/reviewform/page-[hash].js	6.92 KB	6.85 KB	+0.07 KB (+0.97%)	🔴 Regression
static/css/[hash].css	41.11 KB	41.08 KB	+0.02 KB (+0.06%)	🔴 Regression

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	3986.87 KB	3985.28 KB	+1.60 KB (+0.04%)
Total CSS	331.77 KB	331.41 KB	+0.37 KB (+0.11%)

[Aamod007]

This is a fantastic accessibility improvement! Adding proper ARIA support, tab navigation, and focus rings ensures that the Customizer and Color Picker are usable for everyone, regardless of how they navigate the web. The test updates properly reflect these semantic role changes.

Everything looks excellent, great work!

Label Justification:

• \level:advanced: Assigned based on 3 files changed to add keyboard navigation and ARIA attributes across complex UI components.
• \quality:clean: Excellent semantic markup and robust test updates.
• \ ype:accessibility: Specifically improves screen reader and keyboard interaction support.
• \mentor:Aamod007: Assigned as required.

[github-actions]

🎉 Congratulations @nishtha-agarwal-211! Your PR has been successfully merged. 🚀

Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.

⚠️ Important for GSSoC Contributors:
You are strictly advised to join our Discord Server as it is mandatory for all GSSoC participants. All important announcements, point claims, and community discussions happen there.

Keep building! 💻✨