From 8fa0fb3d4e53143f1652e73fe4661088702630d9 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Thu, 6 Feb 2025 12:51:39 -0500
Subject: [PATCH] fix(components): add focus-visible style to list button

add focus-visible style to list button

close RQA-3930
---
 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 610c76bb7a9..722b9a7ac9c 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}