Skip to content

🎨 Palette: Focus states pour QuestionCard #320

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

Merged
bobdivx merged 1 commit into from
Nov 11, 2026
Merged

🎨 Palette: Focus states pour QuestionCard #320

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
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
6 changes: 3 additions & 3 deletions apps/web/src/components/chat/QuestionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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>
Expand Down
Loading