🎨 Palette: [UX improvement] Add ARIA labels and focus rings to AgentCard action buttons#117
🎨 Palette: [UX improvement] Add ARIA labels and focus rings to AgentCard action buttons#117bobdivx wants to merge 1 commit into
Conversation
…ard action buttons 💡 What: Added explicit `aria-label` attributes, hid decorative SVGs with `aria-hidden="true"`, and applied Tailwind `focus-visible` ring utilities to the icon-only action buttons in `AgentCard`. 🎯 Why: Icon-only buttons used for agent actions (start/stop/configure) were relying solely on `title` attributes without proper accessibility labeling or visible keyboard focus rings. This change ensures screen reader compatibility and visible keyboard navigation. 📸 Before/After: Keyboard focus is now clearly visible with an emerald ring, and SVGs are correctly hidden from the accessibility tree. ♿ Accessibility: Improved screen reader announcements and visible keyboard focus for critical interactive elements in the swarm dashboard. Co-authored-by: bobdivx <6737167+bobdivx@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.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the accessibility of icon-only buttons in the agent cards by adding explicit aria-label attributes, hiding decorative SVGs with aria-hidden="true", and introducing Tailwind focus-visible ring utilities. It also documents these changes in .jules/palette.md. The feedback recommends adding focus-visible:ring-offset-2 to the focus rings to resolve contrast issues on dark backgrounds and ensure visual consistency across interactive elements.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| onClick={() => onSwarmCommand?.(agent.id, cmd)} | ||
| disabled={commandBusy} | ||
| class={`rounded-xl border p-2 transition-all disabled:opacity-50 ${cmd === 'start_work' ? 'bg-gray-900 border-gray-900 text-white hover:bg-black' : 'bg-white border-gray-200 text-gray-400 hover:text-rose-500 hover:border-rose-200'}`} | ||
| class={`rounded-xl border p-2 transition-all disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37] ${cmd === 'start_work' ? 'bg-gray-900 border-gray-900 text-white hover:bg-black' : 'bg-white border-gray-200 text-gray-400 hover:text-rose-500 hover:border-rose-200'}`} |
There was a problem hiding this comment.
The focus ring color focus-visible:ring-[#175B37] (a dark green) has extremely low contrast against the dark gray background (bg-gray-900 / hover:bg-black) of the 'Lancer une mission' button. This makes the focus indicator nearly invisible for keyboard users, which defeats the purpose of adding focus rings for accessibility (WCAG 2.1 SC 1.4.11 Non-text Contrast).\n\nAdding focus-visible:ring-offset-2 will introduce a light/white gap between the dark button and the dark green ring, making the focus indicator highly visible and compliant.
| class={`rounded-xl border p-2 transition-all disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37] ${cmd === 'start_work' ? 'bg-gray-900 border-gray-900 text-white hover:bg-black' : 'bg-white border-gray-200 text-gray-400 hover:text-rose-500 hover:border-rose-200'}`} | |
| class={`rounded-xl border p-2 transition-all disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#175B37] ${cmd === 'start_work' ? 'bg-gray-900 border-gray-900 text-white hover:bg-black' : 'bg-white border-gray-200 text-gray-400 hover:text-rose-500 hover:border-rose-200'}`} |
| setConfigOpen(true); | ||
| }} | ||
| class="rounded-xl border border-gray-200 bg-white p-2 text-gray-400 transition-all hover:border-[#175B37]/30 hover:text-[#175B37]" | ||
| class="rounded-xl border border-gray-200 bg-white p-2 text-gray-400 transition-all hover:border-[#175B37]/30 hover:text-[#175B37] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" |
There was a problem hiding this comment.
To maintain consistency with the other action buttons, add focus-visible:ring-offset-2 to the configuration button's focus ring classes as well.
| class="rounded-xl border border-gray-200 bg-white p-2 text-gray-400 transition-all hover:border-[#175B37]/30 hover:text-[#175B37] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]" | |
| class="rounded-xl border border-gray-200 bg-white p-2 text-gray-400 transition-all hover:border-[#175B37]/30 hover:text-[#175B37] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#175B37]" |
1 participant
Added explicit accessibility attributes and keyboard focus rings to icon-only action buttons. Also updated the
.jules/palette.mdjournal.PR created automatically by Jules for task 17882960572045317413 started by @bobdivx