From b1eb05228dd14c65da6015a3d63ed3b6107a5ce8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 17:17:16 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20accessibili?=
 =?UTF-8?q?ty=20of=20icon-only=20composer=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added ARIA labels, titles, hidden states for internal icons, and focus-visible rings to the send button and options menu button in the composer.
🎯 Why: Textual and SVG icon-only buttons are unreadable by screen readers without ARIA labels, and missing focus rings harm keyboard navigation accessibility.
📸 Before/After: Visual outline added for keyboard focus.
♿ Accessibility: Improved screen reader announcements and explicit keyboard focus visibility.

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 .jules/palette.md                                       | 4 ++++
 src/components/discussion/composer/ComposerInput.tsx    | 6 ++++--
 src/components/discussion/composer/DiscussionHeader.tsx | 6 ++++--
 3 files changed, 12 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..e977bdd4
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2024-05-23 - Enhanced Accessibility of Icon-Only Composer Buttons
+**Learning:** Textual icons (like `>`) and raw SVG icons inside buttons are frequently missed by screen readers or read confusingly without appropriate ARIA labels and `aria-hidden` attributes. Keyboard focus visibility must also be explicitly set for a fully accessible interface.
+**Action:** When adding or updating icon-only buttons, always ensure they have an `aria-label`, an optional `title` for hover, `aria-hidden="true"` on the internal icon elements, and `focus-visible` styling (`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#175B37]`).
diff --git a/src/components/discussion/composer/ComposerInput.tsx b/src/components/discussion/composer/ComposerInput.tsx
index 43d51466..e0eebe63 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-[#175B37] focus-visible:ring-offset-2"
+          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..c68c1868 100644
--- a/src/components/discussion/composer/DiscussionHeader.tsx
+++ b/src/components/discussion/composer/DiscussionHeader.tsx
@@ -113,10 +113,12 @@ 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]"
           onClick={() => setHeaderMenuOpen((v: boolean) => !v)}
+          aria-label="Ouvrir le menu d'options"
+          title="Options"
         >
-          <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>