feat: keyboard navigation filter item (#5667)

Unleash · Dec 18, 2023 · 6bf54a2 · 6bf54a2
1 parent 5ba588f
commit 6bf54a2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/frontend/src/component/filter/FilterItem/FilterItem.styles.tsx b/frontend/src/component/filter/FilterItem/FilterItem.styles.tsx
@@ -11,8 +11,9 @@ export const StyledDropdown = styled('div')(({ theme }) => ({
 export const StyledListItem = styled(ListItem)(({ theme }) => ({
     paddingLeft: theme.spacing(1),
     cursor: 'pointer',
-    '&:hover': {
+    '&:hover, &:focus': {
         backgroundColor: theme.palette.action.hover,
+        outline: 'none',
     },
 }));
 

diff --git a/frontend/src/component/filter/FilterItem/FilterItem.tsx b/frontend/src/component/filter/FilterItem/FilterItem.tsx
@@ -9,6 +9,7 @@ import {
     StyledTextField,
 } from './FilterItem.styles';
 import { FilterItemChip } from './FilterItemChip/FilterItemChip';
+import { onEnter } from '../../common/Search/SearchSuggestions/onEnter';
 
 export interface IFilterItemProps {
     name: string;
@@ -159,6 +160,10 @@ export const FilterItem: FC<IFilterItemProps> = ({
                                         key={option.value}
                                         dense
                                         disablePadding
+                                        tabIndex={0}
+                                        onKeyDown={onEnter(
+                                            handleToggle(option.value),
+                                        )}
                                         onClick={handleToggle(option.value)}
                                     >
                                         <StyledCheckbox