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 = ({ key={option.value} dense disablePadding + tabIndex={0} + onKeyDown={onEnter( + handleToggle(option.value), + )} onClick={handleToggle(option.value)} >