From 2d0e8ead44c96522805571e4ccec05fb4dd6282a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 16 May 2026 17:25:37 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Accessibility=20&=20f?=
 =?UTF-8?q?ocus=20improvements=20for=20composer=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 (`&gt;`) 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/palette.md                                       | 3 +++
 src/components/discussion/composer/ComposerInput.tsx    | 6 ++++--
 src/components/discussion/composer/DiscussionHeader.tsx | 8 ++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..0cb0810e
--- /dev/null
+++ b/.jules/palette.md
@@ -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 `&gt;` 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 `&gt;`) 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.
diff --git a/src/components/discussion/composer/ComposerInput.tsx b/src/components/discussion/composer/ComposerInput.tsx
index 43d51466..19c54805 100644
--- a/src/components/discussion/composer/ComposerInput.tsx
+++ b/src/components/discussion/composer/ComposerInput.tsx
@@ -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>
diff --git a/src/components/discussion/composer/DiscussionHeader.tsx b/src/components/discussion/composer/DiscussionHeader.tsx
index 5a7815f7..3b9b64ff 100644
--- a/src/components/discussion/composer/DiscussionHeader.tsx
+++ b/src/components/discussion/composer/DiscussionHeader.tsx
@@ -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"
         >
-          <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>