fix(notes): make SellNoteModal dropzone accessible to keyboard and sc…

[kartikbhardwaj1111]

Summary

• I linked the issue this PR addresses: Fixes File upload dropzone in SellNoteModal is inaccessible to keyboard and screen reader users #106
• I targeted dev as the base branch unless instructed otherwise
• I kept the change scoped to one issue
• I added screenshots or recordings for UI changes
• I added testing notes

What changed

1. Accessibility Semantics & Attributes:

   • Added role="button" to announce the dropzone as an interactive button to assistive technologies.
   • Added tabIndex={0} so keyboard users can navigate to the dropzone using Tab.
   • Added a dynamic aria-label describing the upload action or displaying the selected file name & size.

2. Keyboard Interaction:

   • Added an onKeyDown handler that triggers the system file picker when pressing either Enter or Space (with e.preventDefault() on space to prevent accidental page scroll).

3. Visible Focus & Drag-and-Drop States:

   • Added clear visual focus ring styles (focus:outline-none focus:ring-2 focus:ring-[#6366f1] focus:ring-offset-2 focus:ring-offset-[#111111]) complying with WCAG 2.4.7.
   • Added dragOver state handling (onDragOver, onDragLeave, onDrop) with active visual feedback matching the UploadPYQModal.tsx pattern.

4. Event Propagation & Alerts:

   • Added onClick={e => e.stopPropagation()} on the hidden file input to avoid click event bubbling recursion.
   • Added role="alert" on form error messages so validation errors are spoken aloud by screen readers.

5. Automated Unit Tests:

   • Added a comprehensive unit test suite in frontend/src/components/notes/__tests__/SellNoteModal.test.tsx covering keyboard triggers, ARIA roles, drag & drop, file validation, and form submission.

Why this change is needed

Previously, the PDF upload area in SellNoteModal was implemented as a plain <div> with only an onClick listener. It was inaccessible to keyboard-only and screen-reader users, violating WCAG 2.1 Level A (2.1.1 Keyboard Navigation, 4.1.2 Name/Role/Value) and blocking students with disabilities from selling notes.

Testing

• Manually tested
• Added/updated automated tests

Test Results:

• Vitest Unit Tests: 7 of 7 passed (100%) in SellNoteModal.test.tsx
• ESLint: Passed with 0 errors, 0 warnings
• Vite Build: Production bundle built successfully with 0 errors

Screenshots

Before (Plain div, no focus state)	After (Accessible dropzone with focus ring & drag-and-drop feedback)
Plain un-focusable box	Purple focus ring on Tab + drag hover highlight

[github-actions]

Hi @kartikbhardwaj1111, thanks for contributing to Nyay Setu! 🎉

I have automatically:

• 👤 Assigned this PR to you.
• 🏷️ Applied the gssoc:approved label.

Our workflows will now analyze your changes to classify:

• 📈 PR Difficulty: level:*
• 🧩 PR Type: type:*
• 🌟 PR Quality: quality:*

Tip

Ensure your PR description references the issue it resolves (e.g. Closes #123). This allows the bot to inherit any additional labels from that issue!

Happy coding! 🚀