Revert "A11Y: fix setting focus to a post (#23367)" (#24783)

This reverts commit 9dce1592dc.

The change is having some adverse effects.

app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js

@@ -10,7 +10,9 @@ import DiscourseURL from "discourse/lib/url";
 import Composer from "discourse/models/composer";
 import { capabilities } from "discourse/services/capabilities";
 import { INPUT_DELAY } from "discourse-common/config/environment";
+import discourseDebounce from "discourse-common/lib/debounce";
 import discourseLater from "discourse-common/lib/later";
+import { bind } from "discourse-common/utils/decorators";
 import domUtils from "discourse-common/utils/dom-utils";
 
 let extraKeyboardShortcutsHelp = {};
@@ -748,11 +750,8 @@ export default {
 
     for (const a of articles) {
       a.classList.remove("selected");
-      a.removeAttribute("tabindex");
     }
     article.classList.add("selected");
-    article.setAttribute("tabindex", "0");
-    article.focus();
 
     this.appEvents.trigger("keyboard:move-selection", {
       articles,
@@ -769,7 +768,8 @@ export default {
       );
     } else if (article.classList.contains("topic-post")) {
       return this._scrollTo(
-        article.querySelector("#post_1") ? 0 : articleTopPosition
+        article.querySelector("#post_1") ? 0 : articleTopPosition,
+        { focusTabLoc: true }
       );
     }
 
@@ -786,11 +786,25 @@ export default {
     this._scrollTo(articleTopPosition - window.innerHeight * scrollRatio);
   },
 
-  _scrollTo(scrollTop) {
+  _scrollTo(scrollTop, opts = {}) {
     window.scrollTo({
       top: scrollTop,
       behavior: "smooth",
     });
+
+    if (opts.focusTabLoc) {
+      window.addEventListener("scroll", this._onScrollEnds, { passive: true });
+    }
+  },
+
+  @bind
+  _onScrollEnds() {
+    window.removeEventListener("scroll", this._onScrollEnds, { passive: true });
+    discourseDebounce(this, this._onScrollEndsCallback, animationDuration);
+  },
+
+  _onScrollEndsCallback() {
+    document.querySelector(".topic-post.selected span.tabLoc")?.focus();
   },
 
   categoriesTopicsList() {

app/assets/javascripts/discourse/app/lib/utilities.js

@@ -78,18 +78,17 @@ export function highlightPost(postNumber) {
     return;
   }
 
-  const element = container.querySelector(".topic-body, .small-action-desc");
+  container.querySelector(".tabLoc")?.focus();
+
+  const element = container.querySelector(".topic-body");
   if (!element || element.classList.contains("highlighted")) {
     return;
   }
 
   element.classList.add("highlighted");
-  element.setAttribute("tabindex", "0");
-  element.focus();
 
   const removeHighlighted = function () {
     element.classList.remove("highlighted");
-    element.removeAttribute("tabindex");
     element.removeEventListener("animationend", removeHighlighted);
   };
   element.addEventListener("animationend", removeHighlighted);

app/assets/javascripts/discourse/app/widgets/post-small-action.js

@@ -190,6 +190,9 @@ export default createWidget("post-small-action", {
     }
 
     return [
+      h("span.tabLoc", {
+        attributes: { "aria-hidden": true, tabindex: -1 },
+      }),
       h("div.topic-avatar", iconNode(icons[attrs.actionCode] || "exclamation")),
       h("div.small-action-desc", [
         h("div.small-action-contents", contents),

app/assets/javascripts/discourse/app/widgets/post.js

@@ -758,7 +758,11 @@ createWidget("post-article", {
   },
 
   html(attrs, state) {
-    const rows = [];
+    const rows = [
+      h("span.tabLoc", {
+        attributes: { "aria-hidden": true, tabindex: -1 },
+      }),
+    ];
     if (state.repliesAbove.length) {
       const replies = state.repliesAbove.map((p) => {
         return this.attach("embedded-post", p, {

app/assets/javascripts/discourse/tests/acceptance/topic-test.js

@@ -11,7 +11,6 @@ import CategoryFixtures from "discourse/tests/fixtures/category-fixtures";
 import topicFixtures from "discourse/tests/fixtures/topic";
 import {
   acceptance,
-  chromeTest,
   count,
   exists,
   publishToMessageBus,
@@ -413,22 +412,18 @@ acceptance("Topic featured links", function (needs) {
     );
   });
 
-  // Using J/K on Firefox clean the text selection, so this won't work there
-  chromeTest(
-    "Quoting a quote with replyAsNewTopic keeps the original poster name",
-    async function (assert) {
-      await visit("/t/internationalization-localization/280");
-      await selectText("#post_5 blockquote");
-      await triggerKeyEvent(document, "keypress", "J");
-      await triggerKeyEvent(document, "keypress", "T");
+  test("Quoting a quote with replyAsNewTopic keeps the original poster name", async function (assert) {
+    await visit("/t/internationalization-localization/280");
+    await selectText("#post_5 blockquote");
+    await triggerKeyEvent(document, "keypress", "J");
+    await triggerKeyEvent(document, "keypress", "T");
 
-      assert.ok(
-        query(".d-editor-input").value.includes(
-          'quote="codinghorror said, post:3, topic:280"'
-        )
-      );
-    }
-  );
+    assert.ok(
+      query(".d-editor-input").value.includes(
+        'quote="codinghorror said, post:3, topic:280"'
+      )
+    );
+  });
 
   test("Quoting by selecting text can mark the quote as full", async function (assert) {
     await visit("/t/internationalization-localization/280");

app/assets/stylesheets/common/base/topic-post.scss

@@ -67,7 +67,6 @@
     vertical-align: middle;
     a {
       color: var(--primary-high-or-secondary-low);
-      outline-offset: -1px;
     }
   }
   .fa {
@@ -942,24 +941,11 @@ aside.quote {
     border-top: 1px solid var(--primary-low);
     padding-top: 0.5em;
   }
-
   @media (prefers-reduced-motion: no-preference) {
     &.highlighted {
       animation: background-fade-highlight 2.5s ease-out;
     }
   }
-}
-
-.topic-body:not(.deleted),
-.small-action-desc {
-  @media (prefers-reduced-motion: no-preference) {
-    &.highlighted {
-      animation: background-fade-highlight 2.5s ease-out;
-    }
-  }
-  &.highlighted:focus-visible {
-    outline: none;
-  }
   .deleted & {
     // Disable so the deleted background is visible immediately
     &.highlighted {
@@ -1154,10 +1140,6 @@ blockquote > *:last-child {
   display: flex;
   align-items: center;
 
-  &:focus-visible {
-    outline: none;
-  }
-
   &.deleted {
     background-color: var(--danger-low-mid);
   }

app/assets/stylesheets/common/components/keyboard_shortcuts.scss

@@ -3,22 +3,20 @@
   border-left: 1px solid transparent;
 }
 
-.topic-list tr.selected,
-.topic-list-item.selected,
+.topic-list tr.selected td:first-child,
+.topic-list-item.selected td:first-child,
 .latest-topic-list-item.selected,
 .search-results .fps-result.selected {
   box-shadow: inset 3px 0 0 var(--danger); // needs to be inset for Edge
-  &:focus-visible {
-    outline: none;
-  }
 }
 
 .featured-topic.selected,
 .topic-post.selected {
   box-shadow: -3px 0 0 var(--danger);
-  &:focus-visible {
-    outline: none;
-  }
+}
+
+.tabLoc:focus {
+  outline: none;
 }
 
 .latest .featured-topic {