mirror of
https://github.com/Unleash/unleash.git
synced 2025-11-10 01:19:53 +01:00
Chore: remove aria-current; group buttons (#10919)
After some more consideration and reading, I don't think `aria-current` is the right attribute here. Additionally, `aria-pressed` and `aria-selected` are also not appropriate here. I can't find a suitable alternative, so I'm falling back to the first rule of aria: if you don't know what to do: don't do anything. As such, I'm falling back to regular html data attributes.
This commit is contained in:
parent
79e439ea05
commit
cd0eff35e2
@ -7,7 +7,7 @@ export const makeStyledChip = (ariaControlTarget: string) =>
|
|||||||
padding: theme.spacing(0.5),
|
padding: theme.spacing(0.5),
|
||||||
fontSize: theme.typography.body2.fontSize,
|
fontSize: theme.typography.body2.fontSize,
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
'&[aria-current="true"]': {
|
'&[data-selected="true"]': {
|
||||||
backgroundColor: theme.palette.secondary.light,
|
backgroundColor: theme.palette.secondary.light,
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
borderColor: theme.palette.primary.main,
|
borderColor: theme.palette.primary.main,
|
||||||
@ -28,10 +28,10 @@ export const makeStyledChip = (ariaControlTarget: string) =>
|
|||||||
borderBottomRightRadius: theme.shape.borderRadius,
|
borderBottomRightRadius: theme.shape.borderRadius,
|
||||||
},
|
},
|
||||||
|
|
||||||
'&:not(&[aria-current="true"], :last-of-type)': {
|
'&:not(&[data-selected="true"], :last-of-type)': {
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
},
|
},
|
||||||
'[aria-current="true"] + &': {
|
'[data-selected="true"] + &': {
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -33,13 +33,13 @@ export const StateFilterChips: FC<FilterChipsProps> = ({
|
|||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledChip
|
<StyledChip
|
||||||
label={'Open'}
|
label={'Open'}
|
||||||
aria-current={activeStateFilter === 'open'}
|
data-selected={activeStateFilter === 'open'}
|
||||||
onClick={handleStateFilterChange('open')}
|
onClick={handleStateFilterChange('open')}
|
||||||
title={'Show open change requests'}
|
title={'Show open change requests'}
|
||||||
/>
|
/>
|
||||||
<StyledChip
|
<StyledChip
|
||||||
label={'Closed'}
|
label={'Closed'}
|
||||||
aria-current={activeStateFilter === 'closed'}
|
data-selected={activeStateFilter === 'closed'}
|
||||||
onClick={handleStateFilterChange('closed')}
|
onClick={handleStateFilterChange('closed')}
|
||||||
title={'Show closed change requests'}
|
title={'Show closed change requests'}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -67,13 +67,13 @@ export const UserFilterChips: FC<UserFilterChipsProps> = ({
|
|||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledChip
|
<StyledChip
|
||||||
label={'Created'}
|
label={'Created'}
|
||||||
aria-current={activeUserFilter === 'created'}
|
data-selected={activeUserFilter === 'created'}
|
||||||
onClick={handleUserFilterChange('created')}
|
onClick={handleUserFilterChange('created')}
|
||||||
title={'Show change requests created by you'}
|
title={'Show change requests created by you'}
|
||||||
/>
|
/>
|
||||||
<StyledChip
|
<StyledChip
|
||||||
label={'Approval Requested'}
|
label={'Approval Requested'}
|
||||||
aria-current={activeUserFilter === 'approval requested'}
|
data-selected={activeUserFilter === 'approval requested'}
|
||||||
onClick={handleUserFilterChange('approval requested')}
|
onClick={handleUserFilterChange('approval requested')}
|
||||||
title={'Show change requests requesting your approval'}
|
title={'Show change requests requesting your approval'}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user