From 52fe227ae553fd0747d26c176fd3daf263d5ddfc Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Thu, 6 Feb 2025 13:16:23 -0500
Subject: [PATCH] fix(components): add focus-visible style to list button
 (#17450)

* fix(components): add focus-visible style to list button
---
 components/src/atoms/ListButton/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/src/atoms/ListButton/index.tsx b/components/src/atoms/ListButton/index.tsx
index 38c1b4845c4..3125f190ec1 100644
--- a/components/src/atoms/ListButton/index.tsx
+++ b/components/src/atoms/ListButton/index.tsx
@@ -60,6 +60,11 @@ export function ListButton(props: ListButtonProps): JSX.Element {
         ? COLORS.grey20
         : listButtonProps.hoverBackgroundColor};
     }
+
+    &:focus-visible {
+      outline: 2px solid ${COLORS.blue50};
+      outline-offset: 0.25rem;
+    }
   `
 
   return (
@@ -67,6 +72,7 @@ export function ListButton(props: ListButtonProps): JSX.Element {
       data-testid={`ListButton_${type}`}
       onClick={onClick}
       css={LIST_BUTTON_STYLE}
+      tabIndex={0}
       {...styleProps}
     >
       {children}