fix: hover color removed when filter buttons are clicked

Author: ayesha-waris

src/discussions/learners/learner/LearnerFilterBar.jsx

@@ -27,6 +27,8 @@ const ActionItem = ({
     data-testid={value === selected ? `${value} selected` : null}
     style={{ cursor: 'pointer' }}
     aria-checked={value === selected}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex={value === selected ? '0' : '-1'}
   >
     <Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
     <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">

src/discussions/posts/post-filter-bar/PostFilterBar.jsx

@@ -41,6 +41,8 @@ export const ActionItem = ({
     data-testid={value === selected ? 'selected' : null}
     style={{ cursor: 'pointer' }}
     aria-checked={value === selected}
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex={value === selected ? '0' : '-1'}
   >
     <Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
     <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">

src/index.scss

@@ -251,7 +251,7 @@ header {
   min-width: 29rem;
 }
 
-.filter-menu:focus-within {
+.filter-menu:focus-visible {
   background-color: #e9e6e4 !important;
 }