🎨 Palette: Fix file input accessibility in UploadResumeModal#491
Conversation
Co-authored-by: aafre <8656674+aafre@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the accessibility and focus visibility of the file upload input in the UploadResumeModal by replacing the hidden class with sr-only and adding focus-visible ring styles to the associated label. A review comment points out that the disabled: modifier is ineffective on label elements and suggests using peer-disabled: to correctly reflect the state of the associated input.
| <label | ||
| htmlFor="resume-file-input" | ||
| className="btn-primary inline-flex items-center gap-2 px-6 py-3 cursor-pointer disabled:opacity-50" | ||
| className="btn-primary inline-flex items-center gap-2 px-6 py-3 cursor-pointer disabled:opacity-50 peer-focus-visible:ring-2 peer-focus-visible:ring-accent peer-focus-visible:ring-offset-2" |
There was a problem hiding this comment.
The disabled: modifier in Tailwind CSS targets the :disabled pseudo-class, which is not supported by <label> elements. Since the associated input is marked as a peer, you should use the peer-disabled: modifier to ensure the label visually reflects the disabled state (e.g., reduced opacity and a not-allowed cursor) when the input is disabled during the parsing process.
| className="btn-primary inline-flex items-center gap-2 px-6 py-3 cursor-pointer disabled:opacity-50 peer-focus-visible:ring-2 peer-focus-visible:ring-accent peer-focus-visible:ring-offset-2" | |
| className="btn-primary inline-flex items-center gap-2 px-6 py-3 cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-focus-visible:ring-2 peer-focus-visible:ring-accent peer-focus-visible:ring-offset-2" |
|
Closing duplicate — the most recent version of this change is PR #537. |
Understood. Acknowledging that this work is now obsolete as a duplicate and stopping work on this task. |
1 participant
💡 What: Replaced
hiddenwithsr-only peeron the file input and added focus-visible ring classes to its label wrapper inUploadResumeModal.tsx.🎯 Why: Using
hiddenordisplay: nonecompletely removes elements from the keyboard tab order. This change ensures keyboard users can tab to the upload button and see clear visual focus.📸 Before/After: Visual change only visible on keyboard focus.
♿ Accessibility: Improved keyboard navigation support for screen reader and keyboard-only users.
PR created automatically by Jules for task 5988020814701380557 started by @aafre