diff --git a/lib/ui/src/components/sidebar/Menu.tsx b/lib/ui/src/components/sidebar/Menu.tsx index 10a82923c7d8..b1d20f9748aa 100644 --- a/lib/ui/src/components/sidebar/Menu.tsx +++ b/lib/ui/src/components/sidebar/Menu.tsx @@ -45,9 +45,21 @@ export const MenuButton = styled(Button)(({ highlighted, theme position: 'relative', overflow: 'visible', padding: 7, + transition: 'none', // prevents button border from flashing when focused/blurred '&:focus': { background: theme.barBg, - boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, + boxShadow: 'none', + }, + // creates a pseudo border that does not affect the box model, but is accessible in high contrast mode + '&:focus:before': { + content: '""', + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + borderRadius: '100%', + border: `1px solid ${theme.color.secondary}`, }, ...(highlighted && {