♿️(frontend) show a visible focus outline on menu items

Keyboard focus was cleared with outline:none, and the hover fill does not contrast enough to show which item is focused.

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

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!',
+          },
         },
       },
     },