diff --git a/src/discussions/learners/learner/LearnerFilterBar.jsx b/src/discussions/learners/learner/LearnerFilterBar.jsx
index d9b10c26..62f7cdec 100644
--- a/src/discussions/learners/learner/LearnerFilterBar.jsx
+++ b/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">
diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
index 249a1b78..d0cd89e0 100644
--- a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
+++ b/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">
diff --git a/src/index.scss b/src/index.scss
index dfbcca2b..40fda9df 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -251,7 +251,7 @@ header {
   min-width: 29rem;
 }
 
-.filter-menu:focus-within {
+.filter-menu:focus-visible {
   background-color: #e9e6e4 !important;
 }