Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: add focus style to vertical tabs (#4186)

Browse Source 
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
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx
View File

@ -30,7 +30,14 @@ const StyledTab = styled(Button)<{ selected: boolean }>(
'&.Mui-disabled': { '&.Mui-disabled': {
pointerEvents: 'auto', pointerEvents: 'auto',
}, },
'&:focus-visible': {
outline: `2px solid ${theme.palette.primary.main}`,
},
justifyContent: 'space-between', justifyContent: 'space-between',
'& > span': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
}) })
); );
@ -48,10 +55,8 @@ export const VerticalTab = ({
<StyledTab <StyledTab
selected={Boolean(selected)} selected={Boolean(selected)}
onClick={onClick} onClick={onClick}
disableRipple
disableElevation disableElevation
disableFocusRipple disableFocusRipple
disableTouchRipple
fullWidth fullWidth
> >
{label} {label}