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