From 8de680bb9c4e8ab451a5677b12015f7fb5e44d7d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 11 Nov 2026 07:44:44 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Focus=20states=20pour?=
 =?UTF-8?q?=20QuestionCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Ajout des classes de focus (`focus-visible` pour les boutons, `focus:ring` pour l'input) sur les éléments interactifs custom de `QuestionCard.tsx`.
🎯 Why: Améliorer l'accessibilité au clavier (navigation via Tab) car ces éléments n'utilisaient pas les composants de base (`Button`, `Input`) qui incluent déjà ces styles.
♿ Accessibility: Amélioration de la navigation au clavier (focus visible).

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 .Jules/palette.md                             | 4 ++++
 apps/web/src/components/chat/QuestionCard.tsx | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index ee34abeab4..b2cecfdd13 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -7,3 +7,7 @@
 ## 2024-10-24 - Added Focus Styles to Button component
 **Learning:** The main `Button` component in `apps/web/src/components/ui/Button.tsx` lacked keyboard focus styles (`focus-visible:`). This makes keyboard navigation difficult as users cannot tell which button is currently focused.
 **Action:** Always ensure that base UI interactive components like Buttons have `focus-visible` styles using the app's accent color (`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]`).
+
+## 2024-11-11 - QuestionCard accessibility focus states
+**Learning:** Found that custom interactive elements inside `QuestionCard` (specifically the "Autre..." and "Envoyer" buttons, and the text input field) were missing proper focus styles for keyboard navigation, as they did not use the base UI components (`Button`, `Input`).
+**Action:** Always ensure that custom interactive elements receive the standard `focus-visible` styles (`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]`) for buttons and `focus:ring-2 focus:ring-[var(--color-accent-soft)]` for inputs to maintain accessibility and consistency with the rest of the application.
diff --git a/apps/web/src/components/chat/QuestionCard.tsx b/apps/web/src/components/chat/QuestionCard.tsx
index e9d3085bd3..7f00234295 100644
--- a/apps/web/src/components/chat/QuestionCard.tsx
+++ b/apps/web/src/components/chat/QuestionCard.tsx
@@ -104,7 +104,7 @@ export function QuestionCard({ q, state, answer, busy, hideQuestion, onAnswer }:
             {q.allowFreeText && interactive && !other && (
               <button
                 type="button"
-                class="df-tap-skip inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-white/5 hover:text-[var(--color-ink)] sm:min-h-9"
+                class="df-tap-skip inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-white/5 hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)] sm:min-h-9"
                 onClick={() => setOther(true)}
               >
                 <MessageSquare size={14} aria-hidden />
@@ -127,9 +127,9 @@ export function QuestionCard({ q, state, answer, busy, hideQuestion, onAnswer }:
                 onInput={(e) => setText(e.currentTarget.value)}
                 placeholder="Ta réponse…"
                 aria-label="Ta réponse"
-                class="min-h-11 min-w-0 flex-1 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] px-3 text-base text-[var(--color-ink)] outline-none focus:border-[var(--color-accent)]/50 sm:min-h-9 sm:text-sm"
+                class="min-h-11 min-w-0 flex-1 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] px-3 text-base text-[var(--color-ink)] outline-none focus:border-[var(--color-accent)]/50 focus:ring-2 focus:ring-[var(--color-accent-soft)] sm:min-h-9 sm:text-sm"
               />
-              <button type="submit" disabled={!text.trim()} class="df-tap-skip min-h-11 rounded-lg bg-[var(--color-accent)] px-3 text-sm font-medium text-zinc-950 disabled:opacity-50 sm:min-h-9">
+              <button type="submit" disabled={!text.trim()} class="df-tap-skip min-h-11 rounded-lg bg-[var(--color-accent)] px-3 text-sm font-medium text-zinc-950 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)] sm:min-h-9">
                 Envoyer
               </button>
             </form>