Key navigation

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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 = {

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

app/styles/components/status.scss

@@ -473,8 +473,8 @@
   }
 }
 
-.focusable {
-  &:focus {
+.focusable:focus,
+.focusable-within:focus-within {
   outline: 0;
   box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
 
@@ -484,7 +484,6 @@
     }
   }
 }
-}
 
 .status-card {
   display: flex;