1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00

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)
This commit is contained in:
Nuno Góis 2023-07-07 15:55:57 +01:00 committed by GitHub
parent 6638a2f47d
commit 82d855ea1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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}