Merge pull request #13699 from micahgodbolt/13373-highcontrast-focus

UI: Fix shortcut button focus border to support high contrast
storybookjs · Feb 25, 2021 · 094d76a · 094d76a
2 parents 570ff50 + 7e32605
commit 094d76a
Showing 1 changed file with 13 additions and 1 deletion.
diff --git 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)<MenuButtonProps>(({ 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 && {