diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js
index 04ceab234..9c7da2f31 100644
--- a/app/soapbox/components/scrollable_list.js
+++ b/app/soapbox/components/scrollable_list.js
@@ -20,7 +20,7 @@ const mapStateToProps = state => {
   };
 };
 
-export default @connect(mapStateToProps)
+export default @connect(mapStateToProps, null, null, { forwardRef: true })
 class ScrollableList extends PureComponent {
 
   static contextTypes = {
diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js
index 18d24cd04..9fc3300a8 100644
--- a/app/soapbox/features/notifications/components/notification.js
+++ b/app/soapbox/features/notifications/components/notification.js
@@ -174,7 +174,7 @@ class Notification extends ImmutablePureComponent {
 
   renderMention(notification) {
     return (
-      <div className='notification notification-mention' tabIndex='0'>
+      <div className='notification notification-mention focusable-within' tabIndex='0'>
         <StatusContainer
           id={notification.getIn(['status', 'id'])}
           withDismiss
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 71c52f11b..276752b65 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -473,15 +473,14 @@
   }
 }
 
-.focusable {
-  &:focus {
-    outline: 0;
-    box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
+.focusable:focus,
+.focusable-within:focus-within {
+  outline: 0;
+  box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
 
-    .status.status-direct {
-      &.muted {
-        background: transparent;
-      }
+  .status.status-direct {
+    &.muted {
+      background: transparent;
     }
   }
 }