From cd0eff35e2970f435895b6b959f51108f60980be Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 5 Nov 2025 10:54:31 +0100
Subject: [PATCH] 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.
---
 .../ChangeRequestFilters/ChangeRequestFilters.styles.tsx    | 6 +++---
 .../ChangeRequestFilters/StateFilterChips.tsx               | 4 ++--
 .../ChangeRequests/ChangeRequestFilters/UserFilterChips.tsx | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/ChangeRequestFilters.styles.tsx b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/ChangeRequestFilters.styles.tsx
index d09620bc1f..23caa503c6 100644
--- a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/ChangeRequestFilters.styles.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/ChangeRequestFilters.styles.tsx
@@ -7,7 +7,7 @@ export const makeStyledChip = (ariaControlTarget: string) =>
         padding: theme.spacing(0.5),
         fontSize: theme.typography.body2.fontSize,
         height: 'auto',
-        '&[aria-current="true"]': {
+        '&[data-selected="true"]': {
             backgroundColor: theme.palette.secondary.light,
             fontWeight: 'bold',
             borderColor: theme.palette.primary.main,
@@ -28,10 +28,10 @@ export const makeStyledChip = (ariaControlTarget: string) =>
             borderBottomRightRadius: theme.shape.borderRadius,
         },
 
-        '&:not(&[aria-current="true"], :last-of-type)': {
+        '&:not(&[data-selected="true"], :last-of-type)': {
             borderRightWidth: 0,
         },
-        '[aria-current="true"] + &': {
+        '[data-selected="true"] + &': {
             borderLeftWidth: 0,
         },
 
diff --git a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/StateFilterChips.tsx b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/StateFilterChips.tsx
index 349b76fd46..f115fcd409 100644
--- a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/StateFilterChips.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/StateFilterChips.tsx
@@ -33,13 +33,13 @@ export const StateFilterChips: FC<FilterChipsProps> = ({
         <StyledContainer>
             <StyledChip
                 label={'Open'}
-                aria-current={activeStateFilter === 'open'}
+                data-selected={activeStateFilter === 'open'}
                 onClick={handleStateFilterChange('open')}
                 title={'Show open change requests'}
             />
             <StyledChip
                 label={'Closed'}
-                aria-current={activeStateFilter === 'closed'}
+                data-selected={activeStateFilter === 'closed'}
                 onClick={handleStateFilterChange('closed')}
                 title={'Show closed change requests'}
             />
diff --git a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/UserFilterChips.tsx b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/UserFilterChips.tsx
index 194fe49bc4..990f68f215 100644
--- a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/UserFilterChips.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters/UserFilterChips.tsx
@@ -67,13 +67,13 @@ export const UserFilterChips: FC<UserFilterChipsProps> = ({
         <StyledContainer>
             <StyledChip
                 label={'Created'}
-                aria-current={activeUserFilter === 'created'}
+                data-selected={activeUserFilter === 'created'}
                 onClick={handleUserFilterChange('created')}
                 title={'Show change requests created by you'}
             />
             <StyledChip
                 label={'Approval Requested'}
-                aria-current={activeUserFilter === 'approval requested'}
+                data-selected={activeUserFilter === 'approval requested'}
                 onClick={handleUserFilterChange('approval requested')}
                 title={'Show change requests requesting your approval'}
             />