Skip to content

🎨 Palette: Accessibility & focus improvements for composer buttons #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bobdivx wants to merge 1 commit into
base: dev
Choose a base branch
from
+13 −4
Open

🎨 Palette: Accessibility & focus improvements for composer buttons #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-05-16 - Icon-only Buttons Missing Accessibility Patterns
**Learning:** Discovered a pattern in the application's core composer components where icon-only buttons (like the send message `>` button and options menu SVG button) lacked proper ARIA labels, descriptive titles, and visible keyboard focus states (`focus-visible`). Furthermore, literal characters used as icons (like `>`) were not hidden from screen readers.
**Action:** Added `aria-label`, `title`, and `focus-visible` ring classes to these buttons. Wrapped text-based icons in `<span aria-hidden="true">` and added `aria-hidden="true"` to decorative SVGs. Going forward, will proactively check all new interactive elements for proper labeling and keyboard navigability.
6 changes: 4 additions & 2 deletions src/components/discussion/composer/ComposerInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,11 @@ export default function ComposerInput({
type="button"
onClick={() => void send()}
disabled={sending || historyLoading || sessionUnavailable || !message.trim() || !agentId}
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#175B37] text-white disabled:opacity-40"
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#175B37] text-white disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#175B37]"
aria-label="Envoyer le message"
title="Envoyer le message"
>
&gt;
<span aria-hidden="true">&gt;</span>
</button>
</div>
</div>
Expand Down
8 changes: 6 additions & 2 deletions src/components/discussion/composer/DiscussionHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,14 @@ export default function DiscussionHeader({
</button>
<button
type="button"
class="flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 text-gray-500 transition hover:bg-gray-50 hover:text-gray-800"
class="flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 text-gray-500 transition hover:bg-gray-50 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]/50"
onClick={() => setHeaderMenuOpen((v: boolean) => !v)}
aria-label="Options de session"
title="Options"
aria-expanded={headerMenuOpen}
aria-haspopup="true"
Comment on lines +118 to +121
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 16, 2026

Choose a reason for hiding this comment

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

medium

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"

>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z" />
</svg>
</button>
Expand Down