Skip to content

🎨 Palette: Add ARIA labels and focus states to modal close buttons #508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
aafre wants to merge 1 commit into from
Closed

🎨 Palette: Add ARIA labels and focus states to modal close buttons #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 2025-02-14 - ResponsiveConfirmDialog for Destructive Actions
**Learning:** Destructive actions (like Delete) implemented with custom hardcoded modals lack standard accessibility attributes (`role="dialog"`, `aria-modal`, etc.) and mobile responsiveness (like bottom sheets). This app has a `ResponsiveConfirmDialog` component designed specifically for this purpose, but it was not being utilized uniformly.
**Action:** Always use `ResponsiveConfirmDialog` for destructive confirmation prompts (such as `DeleteResumeModal`) to ensure a consistent, accessible, and mobile-friendly UX that prevents accidental data loss.

## 2024-05-03 - Accessible Modal Close Buttons
**Learning:** Custom modals using React portals often have custom header implementations where icon-only close buttons lack both accessible names (`aria-label`) and visible focus states, which breaks keyboard navigation and screen reader experience.
**Action:** Always ensure custom modal close buttons include `aria-label="Close modal"` and explicit focus states like `focus-visible:ring-2 focus-visible:ring-accent` using Tailwind.
3 changes: 2 additions & 1 deletion resume-builder-ui/src/components/PreviewModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,9 @@ const PreviewModal: React.FC<PreviewModalProps> = ({

<button
onClick={onClose}
className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
title="Close (ESC)"
aria-label="Close preview modal"
>
<MdClose className="text-xl" />
</button>
Expand Down
3 changes: 2 additions & 1 deletion resume-builder-ui/src/components/TabbedHelpModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ export default function TabbedHelpModal({
</h2>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 transition-colors"
className="text-gray-400 hover:text-gray-600 transition-colors rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
aria-label="Close help modal"
Comment on lines +42 to +43
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 3, 2026

Choose a reason for hiding this comment

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

high

The close button in this modal should be updated for accessibility and consistency. For accessibility, this modal must implement a focus trap to ensure keyboard focus remains within the modal's focusable elements while it is open. Additionally, explicitly set type='button' on the button element to prevent unintended form submissions. Styling improvements like adding padding (p-2) and a hover background (hover:bg-gray-100) will improve the hit target size, and using text-gray-500 ensures it meets WCAG 2.1 contrast standards.

              type="button"
              className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
              aria-label="Close help modal"
              title="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.
  2. Explicitly set type='button' on elements that are not intended to submit a form to prevent unintended form submissions.

>
<MdClose className="w-6 h-6" />
</button>
Expand Down
3 changes: 2 additions & 1 deletion resume-builder-ui/src/components/UploadResumeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ export function UploadResumeModal({
</div>
<button
onClick={handleCloseModal}
className="text-white/80 hover:text-white transition-colors"
className="text-white/80 hover:text-white transition-colors rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
aria-label="Close modal"
Comment on lines +102 to +103
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 3, 2026

Choose a reason for hiding this comment

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

high

To ensure accessibility, this modal must implement a focus trap so that keyboard focus remains within the modal while it is open. The close button should also explicitly set type='button' to avoid unintended form submissions. For consistency and usability, add padding and a hover background to increase the hit target, and use focus-visible:ring-accent as per the repository's palette guidelines.

            type="button"
            className="p-2 text-white/80 hover:text-white hover:bg-white/10 transition-colors rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
            aria-label="Close upload modal"
            title="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.
  2. Explicitly set type='button' on elements that are not intended to submit a form to prevent unintended form submissions.

>
<XMarkIcon className="w-6 h-6" />
</button>
Expand Down
Loading