Add an Accessible Label for ZIP File Upload Input

[arpit2006]

Type

Accessibility

Severity

High

Location

frontend/src/app/pages/dashboard.tsx (around line 410)

Description

The ZIP archive upload control uses a visually hidden file input (className="hidden") that is triggered programmatically via an onClick handler attached to a generic <Button>. However, the hidden <input type="file"> does not have a unique id and is not associated with a corresponding <label> element.

Because the upload control lacks a proper programmatic label, assistive technologies cannot reliably associate the visible trigger with the underlying file input. This makes the upload functionality difficult or impossible to discover and operate for screen reader users.

---

User Impact

• Screen reader users may not be able to identify the purpose of the file upload control.
• Users relying on assistive technologies may be unable to trigger the ZIP upload workflow.
• The application's primary scanning functionality becomes inaccessible to some users.
• Reduced compliance with WCAG form accessibility requirements.

---

Steps to Reproduce

1. Open the dashboard using a screen reader (e.g., NVDA, VoiceOver, or JAWS).
2. Navigate to the ZIP upload section.
3. Attempt to identify and activate the upload control.
4. Observe that the hidden file input has no associated accessible label and is not properly connected to the visible trigger.

---

Expected Behavior

The visible upload control should be programmatically associated with the hidden file input so assistive technologies can correctly identify and activate the upload functionality.

---

Current Behavior

• The hidden <input type="file"> has no associated <label>.
• The file input lacks a unique id.
• A generic <Button> triggers the input using JavaScript rather than semantic HTML.
• Screen readers cannot reliably associate the visible control with the hidden input.

---

Recommended Fix

Update the upload control to use semantic HTML by associating the hidden file input with a visible label.

Possible improvements include:

• Assign a unique id to the <input type="file">.
• Replace the JavaScript-triggered button with a <label htmlFor="input-id"> styled as a button.
• Ensure the label provides descriptive text such as "Upload ZIP Archive".
• Preserve keyboard accessibility and screen reader compatibility.

---

Acceptance Criteria

• The file input has a unique id.
• A corresponding <label> is associated using the htmlFor attribute.
• The upload control is fully operable using keyboard navigation.
• Screen readers announce the upload control with a meaningful accessible name.
• The existing upload functionality continues to work without regression.
• Accessibility testing confirms the control is discoverable and operable with common screen readers.

---

Definition of Done

• Hidden file input updated with an id.
• Accessible label implemented.
• Keyboard navigation verified.
• Screen reader testing completed.
• No regressions in the ZIP upload workflow.

[github-actions]

👋 Welcome @arpit2006!

Thank you for opening an issue and contributing to Patchpilot. 🚀

Next Steps

• Please ensure you've provided all the required details.
• A maintainer will review your issue shortly.
• Feel free to ask questions if anything is unclear.

⚡ Want faster assignment and quicker responses?

Join our Discord community:

🔗 https://discord.gg/FcXuyw2Rs

We actively discuss issues, features, roadmap updates, and contributor support there.

Happy Contributing! 🎉

[MamidiDhana]

Hi @ionfwsrijan ,

I would like to work on this issue under SSoC'26.

I have reviewed the accessibility concern and can implement a proper semantic association between the hidden file input and its visible trigger by adding a unique id and a corresponding <label htmlFor="">. I will ensure the upload control remains fully keyboard-accessible, screen reader-friendly, and compliant with WCAG guidelines while preserving the existing ZIP upload functionality without regressions.

Kindly assign this issue to me. Thank you!

[ionfwsrijan]

@MamidiDhana Pls don't spam for issues

[MamidiDhana]

Hi @ionfwsrijan,
I understand your concern. However, my intention was not to spam. I reviewed each issue individually and commented only on the ones I was genuinely interested in contributing to under SSoC'26.
If commenting on multiple issues in a short period caused any inconvenience, I apologize. I'll be more selective with future assignment requests.
Thank you.

[prachishelke1312]

Hii @arpit2006
Could you please assign this issue to me under SSOC26

[ionfwsrijan]

Hey @prachishelke1312!

You've been assigned to this issue.

Before you start, a couple of quick things:

⭐ Star the repo — it helps the project grow and supports the roadmap
🔀 Fork it — work on your fork and open a PR from there when ready

Feel free to drop a comment here if you run into anything or have questions while implementing. Happy building!