🎨 Palette: [UX improvement] Add ARIA labels to icon-only buttons for accessibility#28
🎨 Palette: [UX improvement] Add ARIA labels to icon-only buttons for accessibility#28bobdivx wants to merge 1 commit into
Conversation
…accessibility Added `aria-label` attributes corresponding to their `title` attributes on multiple icon-only `<button>` elements in `AgentCard.tsx` and `AgentRepl.tsx`. This improves accessibility by providing explicit text descriptions for screen readers, allowing users relying on assistive technologies to understand the purpose of these interactive elements. 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 accessibility by adding aria-label attributes to several interactive buttons in AgentCard.tsx and AgentRepl.tsx. The review feedback suggests ensuring that these labels consistently match the descriptive information provided in the title attributes, specifically regarding configuration details and keyboard shortcuts, to provide a uniform experience for screen reader users.
| }} | ||
| class="rounded-xl border border-gray-200 bg-white p-2 text-gray-400 transition-all hover:border-[#175B37]/30 hover:text-[#175B37]" | ||
| title="Configurer cet agent (outils, prompt)" | ||
| aria-label="Configurer cet agent" |
There was a problem hiding this comment.
The aria-label should match the title attribute to ensure that screen reader users receive the same descriptive information as sighted users. The current label omits the context about what can be configured (tools, prompt).
| aria-label="Configurer cet agent" | |
| aria-label="Configurer cet agent (outils, prompt)" |
| class="shrink-0 p-2 rounded-full border border-transparent transition-colors disabled:opacity-25 hover:bg-white hover:border-gray-200 hover:shadow-sm" | ||
| style={{ color: FORGE }} | ||
| title="Exécuter (Entrée)" | ||
| aria-label="Exécuter" |
There was a problem hiding this comment.
The aria-label should include the keyboard shortcut information present in the title attribute. This helps screen reader users discover that the action can be triggered with the Enter key.
| aria-label="Exécuter" | |
| aria-label="Exécuter (Entrée)" |
1 participant
💡 What: Added
aria-labelattributes to icon-only buttons inAgentCard.tsxandAgentRepl.tsx.🎯 Why: To improve accessibility for screen readers. Previously, these buttons only had
titleattributes which provide a visual tooltip but are sometimes inconsistently read by screen readers. Thearia-labelexplicitly defines the accessible name for these controls.📸 Before/After: No visual changes, only DOM structure enhancements for assistive tech.
♿ Accessibility: Significant improvement for screen reader users by explicitly naming interactive elements that otherwise lack text content.
PR created automatically by Jules for task 16146034537820988553 started by @bobdivx