Improvements for keyboard navigation in feeds (#35853)

app/javascript/mastodon/components/hotkeys/index.tsx

@@ -7,11 +7,7 @@ import { normalizeKey, isKeyboardEvent } from './utils';
  * the hotkey with a higher priority is selected. All others
  * are ignored.
  */
-const hotkeyPriority = {
-  singleKey: 0,
-  combo: 1,
-  sequence: 2,
-} as const;
+const hotkeyPriority = { singleKey: 0, combo: 1, sequence: 2 } as const;
 
 /**
  * This type of function receives a keyboard event and an array of
@@ -105,14 +101,15 @@ const hotkeyMatcherMap = {
   new: just('n'),
   forceNew: optionPlus('n'),
   focusColumn: any('1', '2', '3', '4', '5', '6', '7', '8', '9'),
+  focusLoadMore: just('l'),
   reply: just('r'),
   favourite: just('f'),
   boost: just('b'),
   mention: just('m'),
   open: any('enter', 'o'),
   openProfile: just('p'),
-  moveDown: any('down', 'j'),
-  moveUp: any('up', 'k'),
+  moveDown: just('j'),
+  moveUp: just('k'),
   toggleHidden: just('x'),
   toggleSensitive: just('h'),
   toggleComposeSpoilers: optionPlus('x'),

app/javascript/mastodon/components/status.jsx

@@ -114,8 +114,6 @@ class Status extends ImmutablePureComponent {
     muted: PropTypes.bool,
     hidden: PropTypes.bool,
     unread: PropTypes.bool,
-    onMoveUp: PropTypes.func,
-    onMoveDown: PropTypes.func,
     showThread: PropTypes.bool,
     isQuotedPost: PropTypes.bool,
     getScrollPosition: PropTypes.func,
@@ -328,14 +326,6 @@ class Status extends ImmutablePureComponent {
     history.push(`/@${status.getIn(['account', 'acct'])}`);
   };
 
-  handleHotkeyMoveUp = e => {
-    this.props.onMoveUp?.(this.props.status.get('id'), this.node.getAttribute('data-featured'));
-  };
-
-  handleHotkeyMoveDown = e => {
-    this.props.onMoveDown?.(this.props.status.get('id'), this.node.getAttribute('data-featured'));
-  };
-
   handleHotkeyToggleHidden = () => {
     const { onToggleHidden } = this.props;
     const status = this._properStatus();
@@ -399,8 +389,6 @@ class Status extends ImmutablePureComponent {
       mention: this.handleHotkeyMention,
       open: this.handleHotkeyOpen,
       openProfile: this.handleHotkeyOpenProfile,
-      moveUp: this.handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
       toggleHidden: this.handleHotkeyToggleHidden,
       toggleSensitive: this.handleHotkeyToggleSensitive,
       openMedia: this.handleHotkeyOpenMedia,

app/javascript/mastodon/components/status_list.jsx

@@ -14,6 +14,7 @@ import { StatusQuoteManager } from '../components/status_quoted';
 import { LoadGap } from './load_gap';
 import ScrollableList from './scrollable_list';
 
+
 export default class StatusList extends ImmutablePureComponent {
 
   static propTypes = {
@@ -40,84 +41,6 @@ export default class StatusList extends ImmutablePureComponent {
     trackScroll: true,
   };
 
-  componentDidMount() {
-    this.columnHeaderHeight = this.node?.node
-      ? parseFloat(
-          getComputedStyle(this.node.node).getPropertyValue('--column-header-height')
-        ) || 0
-      : 0;
-  }
-
-  getFeaturedStatusCount = () => {
-    return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0;
-  };
-
-  getCurrentStatusIndex = (id, featured) => {
-    if (featured) {
-      return this.props.featuredStatusIds.indexOf(id);
-    } else {
-      return this.props.statusIds.indexOf(id) + this.getFeaturedStatusCount();
-    }
-  };
-
-  handleMoveUp = (id, featured) => {
-    const index = this.getCurrentStatusIndex(id, featured);
-    this._selectChild(id, index, -1);
-  };
-  
-  handleMoveDown = (id, featured) => {
-    const index = this.getCurrentStatusIndex(id, featured);
-    this._selectChild(id, index, 1);
-  };
-
-  _selectChild = (id, index, direction) => {
-    const listContainer = this.node?.node;
-    let listItem = listContainer?.querySelector(
-      // :nth-child uses 1-based indexing
-      `.item-list > :nth-child(${index + 1 + direction})`
-    );
-    
-    if (!listItem) {
-      return;
-    }
-
-    // If selected container element is empty, we skip it
-    if (listItem.matches(':empty')) {
-      this._selectChild(id, index + direction, direction);
-      return;
-    }
-
-    // Check if the list item is a post
-    let targetElement = listItem.querySelector('.focusable');
-
-    // Otherwise, check if the item contains follow suggestions or
-    // is a 'load more' button.
-    if (
-      !targetElement && (
-        listItem.querySelector('.inline-follow-suggestions') ||
-        listItem.matches('.load-more')
-      )
-    ) {
-      targetElement = listItem;
-    }
-
-    if (targetElement) {
-      const elementRect = targetElement.getBoundingClientRect();
-
-      const isFullyVisible =
-        elementRect.top >= this.columnHeaderHeight &&
-        elementRect.bottom <= window.innerHeight;
-
-      if (!isFullyVisible) {
-        targetElement.scrollIntoView({
-          block: direction === 1 ? 'start' : 'center',
-        });
-      }
-
-      targetElement.focus();
-    }
-  }
-
   handleLoadOlder = debounce(() => {
     const { statusIds, lastId, onLoadMore } = this.props;
     onLoadMore(lastId || (statusIds.size > 0 ? statusIds.last() : undefined));
@@ -158,8 +81,6 @@ export default class StatusList extends ImmutablePureComponent {
             <StatusQuoteManager
               key={statusId}
               id={statusId}
-              onMoveUp={this.handleMoveUp}
-              onMoveDown={this.handleMoveDown}
               contextType={timelineId}
               scrollKey={this.props.scrollKey}
               showThread
@@ -176,8 +97,6 @@ export default class StatusList extends ImmutablePureComponent {
           key={`f-${statusId}`}
           id={statusId}
           featured
-          onMoveUp={this.handleMoveUp}
-          onMoveDown={this.handleMoveDown}
           contextType={timelineId}
           showThread
           withCounters={this.props.withCounters}
@@ -191,5 +110,4 @@ export default class StatusList extends ImmutablePureComponent {
       </ScrollableList>
     );
   }
-
 }