Merge branch 'hotkey-nav' into 'develop'

Fix hotkey navigation?

See merge request soapbox-pub/soapbox-fe!1409

app/soapbox/components/scrollable_list.tsx

@@ -42,6 +42,7 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   onRefresh?: () => Promise<any>,
   className?: string,
   itemClassName?: string,
+  id?: string,
   style?: React.CSSProperties,
   useWindowScroll?: boolean
 }
@@ -60,6 +61,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   onLoadMore,
   className,
   itemClassName,
+  id,
   hasMore,
   placeholderComponent: Placeholder,
   placeholderCount = 0,
@@ -133,6 +135,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   const renderFeed = (): JSX.Element => (
     <Virtuoso
       ref={ref}
+      id={id}
       useWindowScroll={useWindowScroll}
       className={className}
       data={data}

app/soapbox/components/status.tsx

@@ -282,13 +282,11 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
   }
 
   handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
-    // FIXME: what's going on here?
+    this.props.onMoveUp(this.props.status.id, this.props.featured);
-    // this.props.onMoveUp(this.props.status.id, e?.target?.getAttribute('data-featured'));
   }
 
   handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
-    // FIXME: what's going on here?
+    this.props.onMoveDown(this.props.status.id, this.props.featured);
-    // this.props.onMoveDown(this.props.status.id, e?.target?.getAttribute('data-featured'));
   }
 
   handleHotkeyToggleHidden = (): void => {
@@ -601,7 +599,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     return (
       <HotKeys handlers={handlers} data-testid='status'>
         <div
-          className='status cursor-pointer'
+          className={classNames('status cursor-pointer', { focusable: this.props.focusable })}
           tabIndex={this.props.focusable && !this.props.muted ? 0 : undefined}
           data-featured={featured ? 'true' : null}
           aria-label={textForScreenReader(intl, status, rebloggedByText)}

app/soapbox/features/status/index.tsx

@@ -715,7 +715,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         <HotKeys handlers={handlers}>
           <div
             ref={this.setStatusRef}
-            className={classNames('detailed-status__wrapper')}
+            className='detailed-status__wrapper focusable'
             tabIndex={0}
             // FIXME: no "reblogged by" text is added for the screen reader
             aria-label={textForScreenReader(intl, status)}