🎨 Palette: [UX improvement] Add focus indicator to ResumeCard download button#446
🎨 Palette: [UX improvement] Add focus indicator to ResumeCard download button#446aafre wants to merge 1 commit into
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 adds a new entry to the project's documentation regarding keyboard focus visibility and implements focus-visible ring styles for the Download PDF button in the ResumeCard component. The feedback suggests extending these accessibility improvements to other interactive elements within the same component, such as the Edit button and thumbnail container, and broadening the documentation guidelines to encompass all interactive elements rather than just icon-only buttons.
| onDownload(resume.id); | ||
| }} | ||
| className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors" | ||
| className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent" |
There was a problem hiding this comment.
The focus indicators added here are missing from other interactive elements in the same component, specifically the "Edit Resume" button (line 225) and the thumbnail container (line 118). To ensure a fully accessible and cohesive keyboard navigation experience, consider applying focus:outline-none focus-visible:ring-2 focus-visible:ring-accent to all interactive elements in the card.
|
|
||
| ## 2025-04-05 - Keyboard Focus Visibility on Icon Buttons | ||
| **Learning:** Custom inline icon buttons within mapped card components (like the Download PDF button on `ResumeCard`) often miss explicit keyboard focus indicators if they only use `hover` state classes, making them invisible to keyboard-only users navigating the card actions. | ||
| **Action:** Always verify keyboard focus states and explicitly add `focus:outline-none focus-visible:ring-2 focus-visible:ring-accent` (or similar design system focus tokens) to custom icon-only buttons to ensure they remain accessible and highly visible during keyboard navigation. |
There was a problem hiding this comment.
The action item is currently limited to "icon-only buttons". However, the accessibility issue of missing focus indicators applies to all interactive elements that rely on hover states. Broadening this guideline to include all interactive components (such as the thumbnail preview and text buttons in ResumeCard) would ensure a more consistently accessible experience across the application, aligning with the requirement to keep documentation updated with UI changes.
References
- Ensure documentation, such as testing plans, is updated to reflect UI and implementation changes made in the same pull request.
1 participant
💡 What: Added
focus-visiblestyling (focus:outline-none focus-visible:ring-2 focus-visible:ring-accent) to theDownload PDFicon button in theResumeCardcomponent.🎯 Why: Custom inline icon buttons that only rely on
hoverstates are effectively invisible to users navigating the site via keyboard. This prevents keyboard-only users from easily knowing when they are focused on the download action.♿ Accessibility: This specific improvement ensures that keyboard users will see a clear, distinct visual focus ring (matching the existing design system accent color) when tabbing to the download button, vastly improving the usability of the primary user dashboard.
PR created automatically by Jules for task 6681330511850818057 started by @aafre