From 3773e43d931574ecc84f82fe88dedcecb3db38d3 Mon Sep 17 00:00:00 2001
From: Ovgodd <c.gromoff@gmail.com>
Date: Fri, 9 Oct 2026 09:39:33 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20show=20a=20visib?=
 =?UTF-8?q?le=20focus=20outline=20on=20menu=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Keyboard focus was cleared with outline:none.
---
 CHANGELOG.md                              |  1 +
 src/frontend/src/primitives/menuRecipe.ts | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 770c43861..0d8b01fb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to
 - ⚡️(backend) reduce domain queries on the application token endpoint
 - ♻️️️(backend) use a dedicated auth scheme for LiveKit token auth
 - ♻️(all) stop relying on cookies for the lobby flow
+- ♿️(frontend) show a visible focus outline on menu items #1797
 
 ### Fixed
 
diff --git a/src/frontend/src/primitives/menuRecipe.ts b/src/frontend/src/primitives/menuRecipe.ts
index 68c9c7ab2..ddd206fc2 100644
--- a/src/frontend/src/primitives/menuRecipe.ts
+++ b/src/frontend/src/primitives/menuRecipe.ts
@@ -25,12 +25,15 @@ export const menuRecipe = sva({
       '&[data-focused]': {
         color: 'primary.text',
         backgroundColor: 'primaryDark.100',
-        outline: 'none!',
       },
       '&[data-hovered]': {
         color: 'primary.text',
         backgroundColor: 'primaryDark.100',
-        outline: 'none!',
+      },
+      '&[data-focus-visible]': {
+        outline: '2px solid',
+        outlineColor: 'focusRing',
+        outlineOffset: '2px',
       },
     },
   },
@@ -49,6 +52,10 @@ export const menuRecipe = sva({
       dark: {
         item: {
           color: 'white',
+          '&[data-focus-visible]': {
+            outlineColor: 'white!',
+            outlineOffset: '2px!',
+          },
         },
       },
     },