Skip to content

🎨 Palette: Add ARIA label and focus state to close button in UploadResumeModal#436

Closed
aafre wants to merge 1 commit into
mainfrom
palette/fix-upload-modal-close-aria-5950397645050069236
Closed

🎨 Palette: Add ARIA label and focus state to close button in UploadResumeModal#436
aafre wants to merge 1 commit into
mainfrom
palette/fix-upload-modal-close-aria-5950397645050069236

Conversation

@aafre
Copy link
Copy Markdown
Owner

@aafre aafre commented Mar 31, 2026

💡 What: Added aria-label="Close modal" and focus-visible styling to the XMarkIcon close button in the UploadResumeModal component.
🎯 Why: The icon-only button lacked an accessible name, making it difficult for screen reader users to understand its purpose. It also lacked a clear visual indicator for keyboard navigation.
📸 Before/After: Verified via Playwright that keyboard navigation now triggers a clear white focus ring on the close button.
♿ Accessibility: Improved screen reader experience by providing an explicit ARIA label and enhanced keyboard accessibility with clear focus states.


PR created automatically by Jules for task 5950397645050069236 started by @aafre

…sumeModal

Co-authored-by: aafre <8656674+aafre@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request improves the accessibility and focus states of the close button in the UploadResumeModal component by adding focus rings and an ARIA label. The review feedback suggests further refinements to the button's hit target size, focus visibility, and label text to better align with usability standards and idiomatic practices.

Comment on lines +102 to +103
className="text-white/80 hover:text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-lg p-1 -m-1"
aria-label="Close modal"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To further improve accessibility and visual consistency for keyboard users, consider the following enhancements:

  1. Hit Target Size: Increasing the padding to p-2 (and adjusting the negative margin to -m-2) will expand the interactive area to approximately 40x40px, which is closer to the recommended 44x44px target for better usability on touch devices and for users with motor impairments.
  2. Focus Visibility: Adding focus-visible:text-white ensures the icon becomes fully opaque when focused via keyboard, matching the hover state behavior.
  3. Concise Label: While "Close modal" is descriptive, "Close" is the standard idiomatic label for an 'X' button in a dialog context, ensuring the call-to-action text accurately and concisely describes its action.
Suggested change
className="text-white/80 hover:text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-lg p-1 -m-1"
aria-label="Close modal"
className="text-white/80 hover:text-white focus-visible:text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-lg p-2 -m-2"
aria-label="Close"
References
  1. A call-to-action's text must accurately describe its action. Using 'Close' for an 'X' button is idiomatic and accurately describes the action of the button.

@aafre
Copy link
Copy Markdown
Owner Author

aafre commented Apr 11, 2026

Closing: superseded by #442 (most comprehensive). Cherry-picked into #457.

@aafre aafre closed this Apr 11, 2026
@google-labs-jules
Copy link
Copy Markdown
Contributor

Closing: superseded by #442 (most comprehensive). Cherry-picked into #457.

Understood. Acknowledging that this work is superseded and stopping work on this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant