Fix labeled sidebar accessibility (#322)

Co-authored-by: Kyler Berry <kyler.berry@vimeo.com>
vimeo · Jul 31, 2023 · 294fcb6 · 294fcb6
1 parent 7e35b20
commit 294fcb6
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/src/components/Sidebar/Sidebar.minors.tsx b/src/components/Sidebar/Sidebar.minors.tsx
@@ -6,6 +6,7 @@ import { ActiveStyles, ItemPropsIntrinsic } from './Sidebar.types';
 import { Button } from '../Button/Button';
 import { Tip } from '../Tip/Tip';
 import { core } from '../../tokens';
+import { Focus } from '../../utils';
 
 export function Item({
   attach = 'right',
@@ -111,6 +112,11 @@ const ItemLabelledStyled = styled(Button)<{
     line-height: initial;
     white-space: initial;
   }
+
+  > ${Focus} {
+    // Accounts for the negative side margin, causing the focus ring to not be visible
+    border-width: 0.4rem;
+  }
 `;
 
 export const Break = styled.div`