From dfd4b3a19309ad7f6d875938b4273c46e9dfa858 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, and the hover fill does not contrast enough to show which item is focused.
---
 CHANGELOG.md                              |  3 ++-
 src/frontend/src/primitives/menuRecipe.ts | 11 +++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb65c5338..9feb29a4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to
 
 - ⚡️(backend) hash application secrets with SHA-256
 - ⚡️(backend) reduce domain queries on the application token endpoint
+- ♿️(frontend) show a visible focus outline on menu items #1797
 
 ### Fixed
 
@@ -106,7 +107,7 @@ and this project adheres to
 
 ### Fixed
 
-- 🐛(helm) probe liveness on __lbheartbeat__ and readiness on __heartbeat__
+- 🐛(helm) probe liveness on **lbheartbeat** and readiness on **heartbeat**
 - 🐛(helm) render periodSeconds and failureThreshold on probes
 - 🐛(backend) report the app release to Sentry instead of "NA"
 - 🐛(frontend) play the waiting room notification sound on every arrival
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!',
+          },
         },
       },
     },