🎨 Palette: Enhance DuplicateResumeModal accessibility and feedback#480
🎨 Palette: Enhance DuplicateResumeModal accessibility and feedback#480aafre wants to merge 1 commit into
Conversation
Adds required ARIA roles to the DuplicateResumeModal, ensures focus rings exist for interactive buttons, and adds an animated spinner indicating background async duplication work. 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 enhances the DuplicateResumeModal by adding ARIA attributes for accessibility, improving focus styles for buttons, and implementing a loading state with a spinner. The review feedback identifies a missing focus trap, which is necessary to keep keyboard focus within the modal, and suggests hiding the decorative loading spinner from screen readers to prevent redundant announcements.
| <div | ||
| role="dialog" | ||
| aria-modal="true" | ||
| aria-labelledby="duplicate-modal-title" | ||
| className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4" | ||
| > |
There was a problem hiding this comment.
This modal implementation is missing a focus trap, which is required by the repository's accessibility rules. While role="dialog" and aria-modal="true" are present, they do not functionally prevent keyboard focus from leaving the modal and interacting with the background content. Consider using a focus trap utility or library to ensure focus remains within the modal's focusable elements while it is open.
References
- For accessibility, all modals must implement a focus trap to ensure keyboard focus remains within the modal's focusable elements while it is open.
| {isDuplicating ? 'Duplicating...' : 'Duplicate'} | ||
| {isDuplicating ? ( | ||
| <> | ||
| <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
There was a problem hiding this comment.
The loading spinner is a decorative element and should be hidden from screen readers to avoid redundant announcements, as the 'Duplicating...' text already provides the necessary state information.
| <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> | |
| <svg aria-hidden="true" className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
|
Closing duplicate — the most recent version of this change is PR #533. |
Understood. Acknowledging that this work is a duplicate and stopping work on this task. |
1 participant
💡 What: The UX enhancement added
Added standard
dialogandaria-labelledbyroles to the DuplicateResumeModal. Introduced an animated SVG spinner alongside state-dependent "Duplicating..." text on the primary submit button. Added distinct focus-visible rings to both the confirm and cancel buttons.🎯 Why: The user problem it solves
Users reliant on screen readers had no structural context that a modal had opened. Keyboard navigators lacked visual feedback indicating which action button was currently focused. All users lacked visual confirmation that the background duplication process was actively executing after clicking the duplicate button.
📸 Before/After: Visual changes summary
Before, the modal lacked accessibility markup, the duplicate button had static text even when disabled during execution, and neither button showed focus states when tabbed to. After, focus rings correctly appear, and an animated spinner with dynamic text gives confidence that the action is processing.
♿ Accessibility: Added ARIA roles and keyboard focus styling
Added
role="dialog",aria-modal="true", andaria-labelledby="duplicate-modal-title"to the modal container. Addedid="duplicate-modal-title"to the header. Explicitly hid the decorative icon usingaria-hidden="true". Implementedfocus-visible:ring-2styling on action buttons.PR created automatically by Jules for task 8034089716399693799 started by @aafre