fix(components): add focus-visible style to list button

add focus-visible style to list button close RQA-3930
Opentrons · Feb 6, 2025 · 8fa0fb3 · 8fa0fb3
1 parent 645267a
commit 8fa0fb3
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/components/src/atoms/ListButton/index.tsx b/components/src/atoms/ListButton/index.tsx
@@ -60,13 +60,19 @@ export function ListButton(props: ListButtonProps): JSX.Element {
         ? COLORS.grey20
         : listButtonProps.hoverBackgroundColor};
     }
+
+    &:focus-visible {
+      outline: 2px solid ${COLORS.blue50};
+      outline-offset: 0.25rem;
+    }
   `
 
   return (
     <Flex
       data-testid={`ListButton_${type}`}
       onClick={onClick}
       css={LIST_BUTTON_STYLE}
+      tabIndex={0}
       {...styleProps}
     >
       {children}