🎨 Palette: Improve accessibility of Upload and Link Insertion modals

[aafre]

💡 What: Improved the accessibility and semantic HTML structure of the UploadResumeModal and LinkInsertionModal components.
🎯 Why: To ensure screen readers can accurately interpret modal focus states and context, to provide clear visual focus indicators for keyboard-only users, and to prevent unintended default form submission behaviors by explicitly defining button types.
♿ Accessibility: Added role="dialog", aria-modal="true", aria-labelledby to modal wrappers; added aria-label to icon-only close buttons; added explicit type="button" to interactive elements; added focus-visible:ring-2 focus-visible:ring-accent for clear focus rings.

---

PR created automatically by Jules for task 2012128871318110399 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]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a crucial accessibility improvement across the application's modal components. By refining the semantic structure and interaction patterns of the UploadResumeModal and LinkInsertionModal, the changes ensure a more inclusive user experience, particularly for those relying on assistive technologies or keyboard navigation. The updates address key areas like screen reader context, visual focus, and proper button functionality, making these core UI elements more robust and accessible.

Highlights

• Enhanced Modal Accessibility: Implemented ARIA attributes such as role="dialog", aria-modal="true", aria-labelledby, and aria-label to the UploadResumeModal and LinkInsertionModal components, significantly improving their interpretation by screen readers and other assistive technologies.
• Improved Keyboard Navigation and Focus: Added focus-visible utility classes to interactive elements within both modals, providing clear and consistent visual focus indicators for users navigating with a keyboard.
• Corrected Button Semantics: Explicitly set type="button" on all interactive buttons in both modals. This prevents unintended default form submissions and ensures correct semantic behavior, enhancing overall user experience and accessibility.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request significantly improves the accessibility of the UploadResumeModal and LinkInsertionModal components. The changes, such as adding ARIA attributes (role, aria-modal, aria-labelledby), providing explicit labels for icon-only buttons, ensuring visible focus states for keyboard users, and setting type="button" on buttons to prevent default form behaviors, are all excellent and follow best practices for accessible web development.

I have one suggestion regarding the use of any in UploadResumeModal.tsx to further improve type safety. Overall, this is a great set of improvements.

[gemini-code-assist]

Instead of disabling the ESLint rule for no-explicit-any, it would be better to provide a proper type for the parseResult state. This improves type safety and maintainability.

The ParseResponse interface, which is the correct type for this state, is defined in useResumeParser.ts. You can export it from that file and import it here.

Suggested changes:

1. In resume-builder-ui/src/hooks/useResumeParser.ts, export the interface:

   export interface ParseResponse {
     // ... contents of the interface
   }

2. Then, in this file (UploadResumeModal.tsx), you can import the type and update the state definition, which would allow you to replace the current lines with:

   import { useResumeParser, type ParseResponse } from '../hooks/useResumeParser';
   // ...
   const [parseResult, setParseResult] = useState<ParseResponse | null>(null);

[aafre]

Closing: LinkInsertionModal a11y was already merged via #381 (PR #338). See #457 for the consolidated Jules batch-2 PR.

[google-labs-jules]

Closing: LinkInsertionModal a11y was already merged via #381 (PR #338). See #457 for the consolidated Jules batch-2 PR.

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