Skip to content

🎨 Palette: Improve accessibility for icon buttons#64

Open
bobdivx wants to merge 1 commit into
devfrom
palette/a11y-icon-buttons-16666060162273218563
Open

🎨 Palette: Improve accessibility for icon buttons#64
bobdivx wants to merge 1 commit into
devfrom
palette/a11y-icon-buttons-16666060162273218563

Conversation

@bobdivx
Copy link
Copy Markdown
Owner

@bobdivx bobdivx commented May 25, 2026

💡 What: Added aria-label, title, and proper focus-visible styles to icon-only buttons in ComposerInput and DiscussionHeader. Also wrapped the > text icon in an aria-hidden span.
🎯 Why: To improve screen reader experience and keyboard navigation visibility, especially preventing literal text like > from being read aloud when a localized aria-label is present.
📸 Before/After: Visual focus ring now uses the theme's green and gray colors with an offset. Screen reader will now announce 'Envoyer le message' instead of 'greater than'.
♿ Accessibility: Ensures interactive elements have descriptive names and visible focus states.


PR created automatically by Jules for task 16666060162273218563 started by @bobdivx

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
forge Ready Ready Preview, Comment May 25, 2026 5:26pm

@google-labs-jules
Copy link
Copy Markdown

👋 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.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request focuses on accessibility improvements and code formatting across the discussion composer components. It adds focus-visible ring styles, descriptive ARIA labels, and titles to interactive buttons, and hides decorative textual icons and SVGs from screen readers using aria-hidden="true". A new palette entry documenting these accessibility practices was also added. The reviewer suggests further enhancing the accessibility of the options menu in DiscussionHeader.tsx by adding appropriate ARIA roles (role="menu" and role="menuitem") and supporting keyboard navigation (closing on Escape).

Comment on lines 153 to 162
<div class="absolute right-0 top-10 z-20 mt-1 w-52 overflow-hidden rounded-xl border border-gray-200 bg-white py-1 shadow-lg">
<button
class="block w-full px-3 py-2 text-left text-sm hover:bg-gray-50"
onClick={() => { setHeaderMenuOpen(false); if (selectedAgentId) void copyToClipboard(selectedAgentId); }}
onClick={() => {
setHeaderMenuOpen(false);
if (selectedAgentId) void copyToClipboard(selectedAgentId);
}}
disabled={!selectedAgentId}
>
Copier la clé de session
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Since the trigger button now has aria-haspopup="true" and aria-expanded, the popup container should have role="menu" and its interactive children should have role="menuitem" to conform to the ARIA Menu Button pattern. Additionally, adding an onKeyDown handler to close the menu when the Escape key is pressed significantly improves keyboard accessibility.

          <div
            class="absolute right-0 top-10 z-20 mt-1 w-52 overflow-hidden rounded-xl border border-gray-200 bg-white py-1 shadow-lg"
            role="menu"
            onKeyDown={(e) => {
              if (e.key === "Escape") {
                setHeaderMenuOpen(false);
              }
            }}
          >
            <button
              role="menuitem"
              class="block w-full px-3 py-2 text-left text-sm hover:bg-gray-50"
              onClick={() => {
                setHeaderMenuOpen(false);
                if (selectedAgentId) void copyToClipboard(selectedAgentId);
              }}
              disabled={!selectedAgentId}
            >
              Copier la clé de session

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant