🎨 Palette: Accessibility & focus improvements for composer buttons#40
🎨 Palette: Accessibility & focus improvements for composer buttons#40bobdivx wants to merge 1 commit into
Conversation
- Added missing `aria-label`, `title`, and `focus-visible` styles to the icon-only send message button in `ComposerInput`. - Added missing `aria-label`, `title`, `aria-expanded`, `aria-haspopup`, and `focus-visible` styles to the options menu button in `DiscussionHeader`. - Hid decorative SVGs and literal character icons (`>`) from screen readers using `aria-hidden="true"`. - Appended learning to `.jules/palette.md` noting the lack of proper labeling and focus styles on icon-only buttons. 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 composer components by adding aria-label, title, and focus-visible styles, as well as hiding decorative icons from screen readers. A review comment suggests further enhancing the options menu button by adding an aria-controls attribute to fully comply with ARIA menu button patterns.
| aria-label="Options de session" | ||
| title="Options" | ||
| aria-expanded={headerMenuOpen} | ||
| aria-haspopup="true" |
There was a problem hiding this comment.
To fully implement the ARIA menu button pattern, the trigger should include an aria-controls attribute referencing the id of the menu it toggles. This allows assistive technologies to programmatically associate the trigger with the menu content.
aria-label="Options de session"
title="Options"
aria-expanded={headerMenuOpen}
aria-haspopup="true"
aria-controls="header-options-menu"
1 participant
💡 What: Added comprehensive accessibility features (ARIA labels, titles, keyboard focus rings, and screen reader hiding for decorative elements) to the primary icon-only buttons in the discussion composer components (
ComposerInput.tsxandDiscussionHeader.tsx).🎯 Why: To make the critical communication interface fully accessible to keyboard users and screen readers, ensuring everyone can participate in discussions seamlessly.
♿ Accessibility: Added explicit
aria-label,title,aria-expanded, andaria-haspopupattributes for context, added Tailwindfocus-visible:ring-2styles for visible keyboard tab navigation, and hid decorative structural text (>) and SVG path elements witharia-hidden="true"to prevent noisy screen reader output.PR created automatically by Jules for task 8512384731551150101 started by @bobdivx