1
0
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:
Thomas Heartman 2025-11-05 10:54:31 +01:00 committed by GitHub
parent 79e439ea05
commit cd0eff35e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 7 deletions

View File

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

View File

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

View File

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