feat(customize): enhance accessibility with keyboard shortcuts

[sureshsuriya]

Description

Fixes #7841

Summary

This PR adds keyboard shortcuts to the Customize page to improve accessibility and user productivity.

Changes

• Added Ctrl/Cmd + C to trigger the Copy Markdown action.
• Added Ctrl/Cmd + S to trigger the Download SVG action.
• Added Ctrl/Cmd + K to quickly focus the username input.
• Added Escape to blur the currently focused element.
• Added Arrow Left and Arrow Right shortcuts to cycle through available themes.
• Prevented shortcuts from triggering while typing in inputs, textareas, or contenteditable elements.
• Added comprehensive keyboard shortcut tests covering all supported shortcuts and interaction scenarios.

Pillar

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

Visual Preview

N/A (Keyboard interaction enhancement)

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. (Not applicable.)
• I have starred the repo.
• I have made sure that I have only one commit to merge in this PR.
• The SVG output matches the CommitPulse quality standards.
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@sureshsuriya is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[retenta-bot]

This PR adds valuable keyboard shortcuts that enhance user interaction on the Customize page, which aligns with our ongoing efforts to improve accessibility. It also complements previous decisions like the addition of a 'Copy SVG' button, which aimed to streamline user actions. Great work on this enhancement! Looking forward to your contributions in the future.

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

Asset	PR Size	Base Size	Difference	Status
static/chunks/app/customize/page-[hash].js	19.49 KB	19.28 KB	+0.21 KB (+1.08%)	🔴 Regression

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	3966.97 KB	3966.23 KB	+0.74 KB (+0.02%)
Total CSS	330.26 KB	330.26 KB	0 B

[Aamod007]

Hey @sureshsuriya! Thanks for adding keyboard shortcuts to the Customize page.

Using a global keydown event listener to handle shortcuts like Ctrl+K, Ctrl+C, and Arrow navigation greatly improves accessibility and user experience. I especially like the guard against triggering shortcuts while the user is typing in inputs or contenteditable areas.

Everything looks solid and the CI is green. Great work!

Labels Assigned:

• level:advanced: Effective use of global event listeners and state synchronization for complex keyboard navigation.
• quality:clean
• type:feature
• mentor:Aamod007