🎨 Palette: [Make file uploads keyboard accessible]#402
Conversation
Replaces `className="hidden"` with `className="sr-only peer"` on the file input, allowing it to remain in the tab order for keyboard users. Uses `peer-focus-visible` classes on the corresponding label to display an accessible focus ring when the underlying input is active. 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. |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the accessibility of the resume file upload feature. By adjusting CSS classes, it ensures that keyboard-only users and screen readers can properly interact with the file input, which was previously inaccessible. The changes also introduce a visible focus indicator, improving the overall user experience for those navigating the interface without a mouse. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![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 correctly improves the accessibility of the file upload component by making it keyboard-focusable. The use of sr-only on the input and peer-focus-visible on the label is a solid, modern approach. I have one suggestion regarding a TypeScript type definition to improve code quality and maintainability.
| }: UploadResumeModalProps) { | ||
| const { parseResume, parsing, progress, error } = useResumeParser(); | ||
| const [dragActive, setDragActive] = useState(false); | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any |
There was a problem hiding this comment.
Instead of disabling the no-explicit-any lint rule, it would be better to fix the underlying issue on the next line. The parseResult state can be properly typed.
The parseResume function returns a Promise<ParseResponse>, so the state should be useState<ParseResponse | null>(null).
To do this, you'll need to:
- Export the
ParseResponseinterface fromresume-builder-ui/src/hooks/useResumeParser.ts. - Import
ParseResponseinto this component. - Update the state declaration on line 26 and remove this
eslint-disablecomment.
This will improve type safety and make the component easier to maintain.
References
- This comment aligns with the principle of improving robustness and type safety in TSX components. Properly typing state variables, similar to using type guards for conditional rendering, prevents potential runtime errors and enhances code maintainability.
1 participant
💡 What: Replaced the
hiddenclass withsr-only peeron the resume file upload<input>, and addedpeer-focus-visiblefocus ring styles to the "Choose File"<label>.🎯 Why: The
hiddenclass applieddisplay: noneto the input, completely removing it from the browser's tab order. This made the file upload button completely inaccessible to keyboard-only users and screen readers, blocking them from using the Resume Parsing feature.📸 Before/After:
♿ Accessibility:
tabindex="0"natural behavior for the visually hidden input).PR created automatically by Jules for task 14653616366003206532 started by @aafre