Skip to content

🎨 Palette: [UX improvement] Add accessibility to UploadResumeModal close button#482

Closed
aafre wants to merge 1 commit into
mainfrom
palette/a11y-upload-modal-close-11736001868483166360
Closed

🎨 Palette: [UX improvement] Add accessibility to UploadResumeModal close button#482
aafre wants to merge 1 commit into
mainfrom
palette/a11y-upload-modal-close-11736001868483166360

Conversation

@aafre
Copy link
Copy Markdown
Owner

@aafre aafre commented Apr 19, 2026

💡 What: Added aria-label and focus-visible styling to the icon-only close button in UploadResumeModal.

🎯 Why: To ensure screen reader users understand the button's purpose and to provide a clear visual indicator for keyboard navigation users.

♿ Accessibility:

  • Added aria-label="Close upload resume modal" to the <button>.
  • Added Tailwind classes focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-md for a clear focus ring.

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

…umeModal close button

Added `aria-label` and `focus-visible` styling to the icon-only close button in `UploadResumeModal` for better screen reader and keyboard navigation support.

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 of the close button in the UploadResumeModal by adding focus states and an aria-label, while also updating the .Jules/palette.md documentation with these new guidelines. Feedback focuses on further enhancing accessibility by increasing the button's target size with padding, simplifying the aria-label for consistency, and ensuring the modal implementation includes a focus trap and Escape key handling.

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-md"
aria-label="Close upload resume 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 improve accessibility and consistency:

  1. Target Size: The current button has a small hit area (24x24px). Adding padding (e.g., p-2) will increase the target size to approximately 40x40px, making it easier to click or tap.
  2. Conciseness: Use a concise aria-label="Close" for consistency with other project modals.
  3. Focus Trap: Ensure this modal implements a focus trap to keep keyboard focus within the modal's focusable elements while it is open, as required by repository accessibility standards.
Suggested change
className="text-white/80 hover:text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-md"
aria-label="Close upload resume modal"
className="p-2 text-white/80 hover:text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-md"
aria-label="Close"
References
  1. For accessibility, all modals must implement a focus trap to ensure keyboard focus remains within the modal's focusable elements while it is open.

Comment thread .Jules/palette.md

## 2025-04-19 - Accessible Close Buttons on Modals
**Learning:** Icon-only close buttons in custom modals (like `UploadResumeModal`) often lack accessible names for screen readers and lack visible focus states for keyboard users, making modal dismissal difficult for some users.
**Action:** When adding or updating custom modal close buttons (e.g., using `XMarkIcon`), explicitly add an `aria-label` and utilize explicit focus states (like `focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-md`) to ensure proper keyboard navigation visibility and accessibility.
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

The accessibility guideline for custom modals should be more comprehensive. Beyond the close button's label and focus state, it should also mandate a minimum target size and remind developers about the focus trap and keyboard navigation requirements already established in the repository's general rules.

Suggested change
**Action:** When adding or updating custom modal close buttons (e.g., using `XMarkIcon`), explicitly add an `aria-label` and utilize explicit focus states (like `focus:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-md`) to ensure proper keyboard navigation visibility and accessibility.
**Action:** When adding or updating custom modal close buttons (e.g., using XMarkIcon), explicitly add a concise aria-label="Close", ensure a minimum target size of 44x44px (e.g., using p-2), and utilize explicit focus states. Additionally, ensure the modal implements a focus trap and handles the Escape key for dismissal to comply with repository accessibility standards.
References
  1. For accessibility, all modals must implement a focus trap to ensure keyboard focus remains within the modal's focusable elements while it is open.
  2. Ensure documentation, such as testing plans, is updated to reflect UI and implementation changes made in the same pull request.

@aafre
Copy link
Copy Markdown
Owner Author

aafre commented May 25, 2026

Closing duplicate — the most recent version of this change is PR #537.

@aafre aafre closed this May 25, 2026
@google-labs-jules
Copy link
Copy Markdown
Contributor

Closing duplicate — the most recent version of this change is PR #537.

Understood. Acknowledging that this work is now obsolete as there is a newer PR (#537) 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