From 6bf54a2f24370060df4b5e70daeb7addcb6395e2 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 18 Dec 2023 12:36:00 +0100
Subject: [PATCH] feat: keyboard navigation filter item (#5667)

---
 .../src/component/filter/FilterItem/FilterItem.styles.tsx    | 3 ++-
 frontend/src/component/filter/FilterItem/FilterItem.tsx      | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/filter/FilterItem/FilterItem.styles.tsx b/frontend/src/component/filter/FilterItem/FilterItem.styles.tsx
index 3e3c24d748..354af6288d 100644
--- 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
index c9e1e82bd3..b98655e07c 100644
--- 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