From 4973159ed68e491d83e0d2b69ef4928c406800c3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 4 Nov 2026 07:15:19 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20keyboard=20focu?=
 =?UTF-8?q?s=20states=20to=20various=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `focus-visible` styles to multiple interactive buttons across `ProjectDetailPage.tsx`, `LoginPage.tsx`, and `SsoSettingsPanel.tsx` to improve keyboard navigation accessibility. This ensures users can tell which element currently has focus without displaying persistent focus rings for mouse users.

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 apps/web/src/components/LoginPage.tsx         |  4 ++--
 apps/web/src/components/ProjectDetailPage.tsx | 10 +++++-----
 apps/web/src/components/SsoSettingsPanel.tsx  |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/LoginPage.tsx b/apps/web/src/components/LoginPage.tsx
index 7ed2c6123e..b1cdc15987 100644
--- a/apps/web/src/components/LoginPage.tsx
+++ b/apps/web/src/components/LoginPage.tsx
@@ -372,7 +372,7 @@ export function LoginPage() {
                 bootstrap?.allow_register && (
                   <button
                     type="button"
-                    class="text-[var(--color-accent)] hover:underline"
+                    class="text-[var(--color-accent)] hover:underline focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded px-1"
                     onClick={() => {
                       setMode('register');
                       setError(null);
@@ -384,7 +384,7 @@ export function LoginPage() {
               ) : (
                 <button
                   type="button"
-                  class="text-[var(--color-accent)] hover:underline"
+                  class="text-[var(--color-accent)] hover:underline focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded px-1"
                   onClick={() => {
                     setMode('login');
                     setError(null);
diff --git a/apps/web/src/components/ProjectDetailPage.tsx b/apps/web/src/components/ProjectDetailPage.tsx
index 3f1e1dab7b..b323655c49 100644
--- a/apps/web/src/components/ProjectDetailPage.tsx
+++ b/apps/web/src/components/ProjectDetailPage.tsx
@@ -2851,7 +2851,7 @@ function EnvPanel({ uuid }: { uuid: string }) {
             <button
               type="button"
               onClick={() => setAdding(false)}
-              class="flex items-center gap-2 text-sm text-[var(--color-ink-muted)] hover:text-white"
+              class="flex items-center gap-2 text-sm text-[var(--color-ink-muted)] hover:text-white focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded"
             >
               <span aria-hidden>←</span>
               Variables
@@ -3237,7 +3237,7 @@ function DomainsPanel({
           <button
             type="button"
             onClick={() => setDomainView(null)}
-            class="flex items-center gap-2 text-sm text-[var(--color-ink-muted)] hover:text-white"
+            class="flex items-center gap-2 text-sm text-[var(--color-ink-muted)] hover:text-white focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded"
           >
             <span aria-hidden>←</span>
             Domaines
@@ -3928,7 +3928,7 @@ function ProjectSettingsPanel({
             }
             gotoSection(null);
           }}
-          class="mb-4 flex items-center gap-2 text-sm text-[var(--color-ink-muted)] hover:text-white"
+          class="mb-4 flex items-center gap-2 text-sm text-[var(--color-ink-muted)] hover:text-white focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded"
         >
           <span aria-hidden>←</span>
           {(section === 'ports' && portView) ||
@@ -3979,7 +3979,7 @@ function ProjectSettingsPanel({
             <button
               type="button"
               onClick={() => gotoSection('branches')}
-              class="flex h-10 items-center justify-between gap-2 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] px-3 text-left max-lg:h-11"
+              class="flex h-10 items-center justify-between gap-2 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] px-3 text-left focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] max-lg:h-11"
             >
               <span class="truncate font-mono text-[13px]">{branch}</span>
               <span class="shrink-0 text-xs text-[var(--color-accent)]">Changer →</span>
@@ -5038,7 +5038,7 @@ function CronsPanel({ projectUuid }: { projectUuid: string }) {
                 {!showAdvanced && (
                   <button
                     type="button"
-                    class="text-xs text-[var(--color-ink-faint)] hover:underline"
+                    class="text-xs text-[var(--color-ink-faint)] hover:underline focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded"
                     onClick={() => setShowAdvanced(true)}
                   >
                     Avancé
diff --git a/apps/web/src/components/SsoSettingsPanel.tsx b/apps/web/src/components/SsoSettingsPanel.tsx
index 681baa5d05..89911a72a4 100644
--- a/apps/web/src/components/SsoSettingsPanel.tsx
+++ b/apps/web/src/components/SsoSettingsPanel.tsx
@@ -236,7 +236,7 @@ export function SsoSettingsPanel({ isAdmin }: { isAdmin: boolean }) {
                 </label>
                 <button
                   type="button"
-                  class="justify-self-start text-sm text-[var(--muted)] underline-offset-2 hover:underline"
+                  class="justify-self-start text-sm text-[var(--muted)] underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded px-1 -ml-1"
                   onClick={() => setShowBranding((v) => !v)}
                 >
                   {showBranding ? 'Masquer branding Pocket ID' : 'Branding Pocket ID (logo / fond)'}
@@ -307,7 +307,7 @@ export function SsoSettingsPanel({ isAdmin }: { isAdmin: boolean }) {
 
             <button
               type="button"
-              class="justify-self-start text-sm text-[var(--muted)] underline-offset-2 hover:underline"
+              class="justify-self-start text-sm text-[var(--muted)] underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-[var(--color-accent)] rounded px-1 -ml-1"
               onClick={() => setShowProxy((v) => !v)}
             >
               {showProxy ? 'Masquer ForwardAuth / Traefik' : 'ForwardAuth / Traefik (optionnel)'}