From 391931986359c60e2a544ecb1bab9f635afbcc20 Mon Sep 17 00:00:00 2001
From: Your Autistic Life <yourautisticlife@gmail.com>
Date: Wed, 25 Oct 2023 12:36:08 -0400
Subject: [PATCH 1/2] fix: skip empty articles

When using keyboard navigation, the current code will be stumped by HTML
article elements that are empty. We now skip over them.
---
 .../mastodon/components/status_list.jsx       | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/javascript/mastodon/components/status_list.jsx b/app/javascript/mastodon/components/status_list.jsx
index e92dd233e15..1e3518740ec 100644
--- a/app/javascript/mastodon/components/status_list.jsx
+++ b/app/javascript/mastodon/components/status_list.jsx
@@ -50,13 +50,11 @@ export default class StatusList extends ImmutablePureComponent {
   };
 
   handleMoveUp = (id, featured) => {
-    const elementIndex = this.getCurrentStatusIndex(id, featured) - 1;
-    this._selectChild(elementIndex, true);
+    this._selectChild(id, featured, true);
   };
 
   handleMoveDown = (id, featured) => {
-    const elementIndex = this.getCurrentStatusIndex(id, featured) + 1;
-    this._selectChild(elementIndex, false);
+    this._selectChild(id, featured, false);
   };
 
   handleLoadOlder = debounce(() => {
@@ -64,18 +62,29 @@ export default class StatusList extends ImmutablePureComponent {
     onLoadMore(lastId || (statusIds.size > 0 ? statusIds.last() : undefined));
   }, 300, { leading: true });
 
-  _selectChild (index, align_top) {
+  _selectChild (id, featured, up) {
+    const align_top = up;
     const container = this.node.node;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
+    const elementIndex = this.getCurrentStatusIndex(id, featured);
+    const increment = up ? -1 : 1
+    let index = elementIndex;
 
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
+    let element = null;
+    while (element === null) {
+      index += increment;
+      const article = container.querySelector(`article:nth-of-type(${index + 1})`);
+      if (article === null) {
+        return;
       }
-      element.focus();
+      element = article.querySelector(".focusable");
     }
+
+    if (align_top && container.scrollTop > element.offsetTop) {
+      element.scrollIntoView(true);
+    } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
+      element.scrollIntoView(false);
+    }
+    element.focus();
   }
 
   setRef = c => {

From 60b19622c0f80b2b2f3a56ce2e9377f1609477d0 Mon Sep 17 00:00:00 2001
From: Your Autistic Life <yourautisticlife@gmail.com>
Date: Wed, 8 Nov 2023 09:12:24 -0500
Subject: [PATCH 2/2] fix: do not skip LoadGap elements

---
 app/javascript/mastodon/components/status_list.jsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/javascript/mastodon/components/status_list.jsx b/app/javascript/mastodon/components/status_list.jsx
index 1e3518740ec..cadac9e73d3 100644
--- a/app/javascript/mastodon/components/status_list.jsx
+++ b/app/javascript/mastodon/components/status_list.jsx
@@ -77,6 +77,14 @@ export default class StatusList extends ImmutablePureComponent {
         return;
       }
       element = article.querySelector(".focusable");
+
+      // This happens when the article contains a LoadGap element. We just want
+      // to stop the navigation there so that the user does not erroneously skip
+      // over it.
+      if (element === null &&
+          article.querySelector(".load-more.load-gap") !== null) {
+        return;
+      }
     }
 
     if (align_top && container.scrollTop > element.offsetTop) {