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