🎨 Palette: Improve New Agent modal accessibility - #72
Conversation
- Add `role="radiogroup"`, `role="radio"`, and `aria-checked` to the custom vendor selection buttons - Map the explicit `id` of the vendor label to `aria-labelledby` on the radiogroup - Associate the "Task" label with the `<Textarea>` using `htmlFor` and `id` - Add explicit `aria-label`s to the repository and branch inputs which only had placeholders - Add `focus-visible` ring styling to the vendor radio buttons for better keyboard navigation Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0220c1b1d7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| role="radio" | ||
| aria-checked={selected} | ||
| onClick={() => setVendor(v)} |
There was a problem hiding this comment.
When a keyboard or screen-reader user reaches this newly declared radio group, the expected interaction is to keep one radio in the Tab sequence and use the Arrow keys to move focus and select an option. These buttons have neither roving tabIndex nor an onKeyDown handler, so every option remains a Tab stop and the Arrow keys announced for a radio group do nothing; implement arrow-key focus/selection or retain button semantics/use native radio inputs.
Useful? React with 👍 / 👎.
1 participant
💡 What
This PR adds comprehensive accessibility improvements to the "New Agent" modal component in the web interface.
🎯 Why
Several interactive elements in the
NewAgentModallacked proper ARIA roles and keyboard accessibility styling, making them difficult to use for users relying on screen readers or keyboard navigation. The vendor selection used custom div/button combinations without native radio semantics, and several text inputs relied solely on placeholders for context.♿ Accessibility Improvements
role="radiogroup"androle="radio"witharia-checkedstates to the custom vendor tiles.aria-labelledby.htmlForandid.aria-labels to therepoandbranchinputs.focus-visiblestyling on the vendor tiles so keyboard users can clearly see which item is focused.PR created automatically by Jules for task 11105085101077024814 started by @parvezk