From 82d855ea1f80c9efb3ce0e002fe4cd65acc3a510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 7 Jul 2023 15:55:57 +0100
Subject: [PATCH] fix: add focus style to vertical tabs (#4186)

https://linear.app/unleash/issue/2-1206/we-need-focus-state-for-vertical-menu

Adds a `focus-visible` style to vertical tabs in order to improve
keyboard navigation.


![image](https://github.com/Unleash/unleash/assets/14320932/e07a1b69-2134-4d76-bafe-1c87a0384e64)
---
 .../common/VerticalTabs/VerticalTab/VerticalTab.tsx      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx b/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx
index 21eaafa3aa..ec86900ea6 100644
--- a/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx
+++ b/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx
@@ -30,7 +30,14 @@ const StyledTab = styled(Button)<{ selected: boolean }>(
         '&.Mui-disabled': {
             pointerEvents: 'auto',
         },
+        '&:focus-visible': {
+            outline: `2px solid ${theme.palette.primary.main}`,
+        },
         justifyContent: 'space-between',
+        '& > span': {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+        },
     })
 );
 
@@ -48,10 +55,8 @@ export const VerticalTab = ({
     <StyledTab
         selected={Boolean(selected)}
         onClick={onClick}
-        disableRipple
         disableElevation
         disableFocusRipple
-        disableTouchRipple
         fullWidth
     >
         {label}