From f873d714833140866ebc7eaf262b34ca76d253dc Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 1 Nov 2026 07:15:50 +0000
Subject: [PATCH] UX: Add keyboard focus-visible states to base components

This commit adds `focus-visible` styling (using the app's accent color) to key interactive elements to improve keyboard navigation accessibility:
- Action and close buttons in the Toast component.
- The close button in the Modal component.
- The interactive HubTile and HubAddTile components.

This ensures screen reader and keyboard-only users can clearly see which element has focus.

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 apps/web/src/components/ui/HubTile.tsx | 4 ++--
 apps/web/src/components/ui/Modal.tsx   | 2 +-
 apps/web/src/components/ui/Toast.tsx   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/ui/HubTile.tsx b/apps/web/src/components/ui/HubTile.tsx
index 5c2ff2bf31..6adfa8aea9 100644
--- a/apps/web/src/components/ui/HubTile.tsx
+++ b/apps/web/src/components/ui/HubTile.tsx
@@ -13,7 +13,7 @@ import { enterUp, interactiveLift, motion, settleIn } from '../../lib/motion';
  */
 
 const TILE_CLASS =
-  'group flex h-full min-h-[8.75rem] w-full min-w-0 cursor-pointer overflow-hidden flex-col items-center gap-2 rounded-2xl bg-[#1c1c1e] px-2.5 py-3 text-center ring-1 ring-transparent transition-[background-color,box-shadow,ring-color] duration-200 hover:bg-[#252528] hover:ring-white/15 hover:shadow-[0_12px_40px_rgb(0_0_0/0.35)] sm:gap-3 sm:px-3 sm:py-4';
+  'group flex h-full min-h-[8.75rem] w-full min-w-0 cursor-pointer overflow-hidden flex-col items-center gap-2 rounded-2xl bg-[#1c1c1e] px-2.5 py-3 text-center ring-1 ring-transparent transition-[background-color,box-shadow,ring-color] duration-200 hover:bg-[#252528] hover:ring-white/15 hover:shadow-[0_12px_40px_rgb(0_0_0/0.35)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)] sm:gap-3 sm:px-3 sm:py-4';
 
 const TILE_SQUARE = 'justify-center sm:aspect-square sm:min-h-[10.5rem]';
 const TILE_AUTO = 'justify-start';
@@ -178,7 +178,7 @@ export function HubAddTile({
       type="button"
       onClick={onClick}
       class={cn(
-        'group flex h-full min-h-[8.75rem] w-full cursor-pointer flex-col items-center gap-2 rounded-2xl border border-dashed border-white/15 bg-[#1c1c1e] px-2.5 py-3 transition-[background-color,border-color,box-shadow] duration-200 hover:border-white/30 hover:bg-[#252528] hover:shadow-[0_12px_40px_rgb(0_0_0/0.35)] sm:gap-3 sm:px-3 sm:py-4',
+        'group flex h-full min-h-[8.75rem] w-full cursor-pointer flex-col items-center gap-2 rounded-2xl border border-dashed border-white/15 bg-[#1c1c1e] px-2.5 py-3 transition-[background-color,border-color,box-shadow] duration-200 hover:border-white/30 hover:bg-[#252528] hover:shadow-[0_12px_40px_rgb(0_0_0/0.35)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)] sm:gap-3 sm:px-3 sm:py-4',
         layout === 'auto' ? 'justify-start' : 'justify-center sm:aspect-square sm:min-h-0',
       )}
       animate={motion((settle ? settleIn : enterUp)(Math.min(index * 0.045, 0.32)), interactiveLift())}
diff --git a/apps/web/src/components/ui/Modal.tsx b/apps/web/src/components/ui/Modal.tsx
index ec031df5e0..4245213be5 100644
--- a/apps/web/src/components/ui/Modal.tsx
+++ b/apps/web/src/components/ui/Modal.tsx
@@ -118,7 +118,7 @@ export function Modal({
           </div>
           <button
             type="button"
-            class="-mr-2 -mt-1.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-base text-[var(--color-ink-muted)] hover:bg-white/5 hover:text-[var(--color-ink)] lg:-mr-1 lg:-mt-0.5 lg:h-8 lg:w-8 lg:text-sm"
+            class="-mr-2 -mt-1.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-base text-[var(--color-ink-muted)] transition hover:bg-white/5 hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)] lg:-mr-1 lg:-mt-0.5 lg:h-8 lg:w-8 lg:text-sm"
             onClick={onClose}
             aria-label="Fermer"
           >
diff --git a/apps/web/src/components/ui/Toast.tsx b/apps/web/src/components/ui/Toast.tsx
index b754d13ac1..05c7067875 100644
--- a/apps/web/src/components/ui/Toast.tsx
+++ b/apps/web/src/components/ui/Toast.tsx
@@ -69,7 +69,7 @@ export function ToastProvider({ children }: { children: ComponentChildren }) {
                 {t.action && (
                   <button
                     type="button"
-                    class="mt-1.5 inline-flex min-h-[44px] items-center rounded-lg px-2 text-sm font-semibold text-[var(--color-accent)] hover:bg-white/5 sm:min-h-[32px]"
+                    class="mt-1.5 inline-flex min-h-[44px] items-center rounded-lg px-2 text-sm font-semibold text-[var(--color-accent)] transition hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] sm:min-h-[32px]"
                     onClick={() => {
                       t.action?.onClick();
                       dismiss(t.id);
@@ -81,7 +81,7 @@ export function ToastProvider({ children }: { children: ComponentChildren }) {
               </div>
               <button
                 type="button"
-                class="text-[var(--color-ink-faint)] hover:text-[var(--color-ink)]"
+                class="rounded text-[var(--color-ink-faint)] transition hover:text-[var(--color-ink)] focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
                 aria-label="Fermer"
                 onClick={() => dismiss(t.id)}
               >