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

[aafre]

💡 What

Added explicit aria-label attributes and focus ring styling (focus-visible:ring-2) to icon-only close buttons in UploadResumeModal, TabbedHelpModal, and PreviewModal.

🎯 Why

Custom modal implementations in React often use icon-only buttons for dismissing the dialog. Without aria-label, screen readers only announce these as "button". Without visible focus states, keyboard-only users cannot easily tell when the close button has focus, making navigation frustrating.

📸 Before/After

Before: Close buttons only had visual icons. Pressing Tab to navigate to them provided no visible indication they were focused.
After: Close buttons have semantic labels for screen readers. When navigating via keyboard, a clear ring appears around the button.

♿ Accessibility

• Ensures WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value) by giving a clear, programmatic name to icon-only buttons.
• Ensures WCAG 2.1 Success Criterion 2.4.7 (Focus Visible) by providing a highly visible focus indicator via focus-visible:ring-2 on all modal close buttons.

---

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

[google-labs-jules]

👋 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.

[gemini-code-assist]

Code Review

This pull request improves the accessibility of modal close buttons across the application by adding aria-label attributes and focus-visible ring styles, while also documenting these standards in the palette guide. Feedback was provided to further enhance these buttons by explicitly setting type='button', increasing hit targets with padding, and ensuring consistent focus ring colors and focus trap implementations.

[gemini-code-assist]

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.

[gemini-code-assist]

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.

[aafre]

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

[google-labs-jules]

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

Understood. Acknowledging that this work is now obsolete and stopping work on this task.