From 187d579be0f4f4d84083ab7bc9c81bc124d5e11d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 6 Nov 2021 11:26:50 +0100
Subject: [PATCH] Key navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/scrollable_list.js         |  2 +-
 .../notifications/components/notification.js      |  2 +-
 app/styles/components/status.scss                 | 15 +++++++--------
 3 files changed, 9 insertions(+), 10 deletions(-)

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;
     }
   }
 }