fix: improve keyboard accessibility for resume upload dropzone

[krishpatel2-prog]

📌 Description

Fixes #5292

This PR improves the accessibility of the Resume Upload component by making the visible upload dropzone keyboard-accessible.

Previously, the upload area relied only on mouse interactions. Keyboard users could not activate the visible dropzone using standard keys such as Enter or Space, which limited usability and accessibility.

---

✨ Changes Made

♿ Improved keyboard accessibility

• Added keyboard interaction support to the visible upload dropzone.

• The upload area now behaves like an interactive control and can be activated using:

  • ⌨️ Enter
  • ⌨️ Space

• Preserved existing:

  • 🖱️ Mouse click behavior
  • 📂 Drag-and-drop functionality
  • 🎨 Existing styling and UI

---

🧪 Accessibility test coverage

Extended the existing accessibility tests to verify:

• ✅ Hidden file input has an accessible label.
• ✅ Empty-state instructions remain screen-reader friendly.
• ✅ Remove file button exposes a descriptive accessible name.
• ✅ Uploading state provides an accessible status message.
• ✅ The upload dropzone is keyboard-focusable.
• ✅ Pressing Enter activates the upload action.
• ✅ Pressing Space activates the upload action.

---

🎯 Why this change?

This improves accessibility for:

• ♿ Keyboard-only users
• 🗣️ Assistive technology users
• 🌐 General usability and compliance with accessible interaction patterns

while keeping the implementation small and preserving all existing functionality.

---

📂 Files Modified

• components/dashboard/ResumeUpload.tsx
• components/dashboard/ResumeUpload.accessibility.test.tsx

---

Pillar

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

---

Visual Preview

N/A – accessibility enhancement ♿

---

✅ Checklist before requesting a review

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally.
• My commits follow the Conventional Commits format.
• I have ensured that this PR remains small and focused.
• I have added/updated tests for the modified behavior.
• I have made sure that I have only one commit to merge in this PR.

[vercel]

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

A member of the Team first needs to authorize it.

[github-actions]

🚨 Hey @krishpatel2-prog, the CI Pipeline is failing on this PR and it has been marked as status:blocked.

Please fix the issues before this can be reviewed. Here's how:

1. Run checks locally before pushing:

npm run format:check   # Check Prettier formatting
npm run lint           # Run ESLint
npm run typecheck      # TypeScript type check
npm run test           # Run unit tests (Vitest)
npm run build          # Verify production build passes

2. Auto-fix common issues:

npm run format         # Auto-fix formatting with Prettier
npm run lint -- --fix  # Auto-fix lint errors where possible

3. Check the full failure log here:
👉 View CI Run

Once you push a fix and the CI passes, the status:blocked label will be removed automatically. 💪

[krishpatel2-prog]

@Aamod007

I noticed that my PR has been automatically marked with status:blocked, but the failures seem unrelated to the changes in this PR.

My changes are limited to:

• components/dashboard/ResumeUpload.tsx
• components/dashboard/ResumeUpload.accessibility.test.tsx

The ResumeUpload accessibility tests are passing successfully. The failing checks appear to come from lib/graph/dependencyGraph.test.ts.

I also noticed that several recent PRs seem to have received the same status:blocked label, so I was wondering if there is currently an issue with the CI or with the dependency graph tests on the latest main.

[Aamod-Dev]

I appreciate the attention to detail here. The changes make sense and fit well with our current structure.

The changes are straightforward and don't seem to introduce any regressions. The implementation follows the established patterns nicely.

Everything looks good. Approving this now.

[Aamod-Dev]

Thanks for the contribution. I've taken a look at the changes and everything seems to align with what we need here.

Everything looks good. Approving this now.

[Aamod-Dev]

Thanks for the contribution. I went through the changes and the overall approach looks good. The keyboard accessibility enhancements for the resume dropzone are well implemented, and adding tests to verify keyboard interactions is a great touch. I'll go ahead and approve this PR. Thanks again for the contribution.

[github-actions]

🎉 Congratulations @krishpatel2-prog! 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! 💻✨