A11Y: Focus last viewed topic in topic lists (#16240)

Meta topic: https://meta.discourse.org/t/discourse-with-a-screen-reader/178105/88?u=osama

This is another attempt to fix the same problem that https://github.com/discourse/discourse/pull/15300 was meant to fix, but it had to be reverted because the `focus()` call caused the topic title to have an outline on certain browsers. This commit does mostly the same thing as the previous one, but the difference is that the native focus indicator outline is replaced with a custom indicator that only appear on the left side of the topic rather than all sides. See https://github.com/discourse/discourse/pull/16240#issuecomment-1075212093 for screenshots.

app/assets/javascripts/discourse/app/components/topic-list-item.js

@@ -1,4 +1,7 @@
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed, {
+  bind,
+  observes,
+} from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import DiscourseURL from "discourse/lib/url";
 import I18n from "I18n";
@@ -58,6 +61,11 @@ export default Component.extend({
         if (this.selected && this.selected.includes(this.topic)) {
           this.element.querySelector("input.bulk-select").checked = true;
         }
+        const title = this.element.querySelector(".main-link .title");
+        if (title) {
+          title.addEventListener("focus", this._onTitleFocus);
+          title.addEventListener("blur", this._onTitleBlur);
+        }
       });
     }
   },
@@ -98,6 +106,11 @@ export default Component.extend({
     if (this.includeUnreadIndicator) {
       this.messageBus.unsubscribe(this.unreadIndicatorChannel);
     }
+    const title = this.element?.querySelector(".main-link .title");
+    if (title) {
+      title.removeEventListener("focus", this._onTitleFocus);
+      title.removeEventListener("blur", this._onTitleBlur);
+    }
   },
 
   @discourseComputed("topic.id")
@@ -259,12 +272,15 @@ export default Component.extend({
         return;
       }
 
-      const $topic = $(this.element);
-      $topic
-        .addClass("highlighted")
-        .attr("data-islastviewedtopic", opts.isLastViewedTopic);
-
-      $topic.on("animationend", () => $topic.removeClass("highlighted"));
+      this.element.classList.add("highlighted");
+      this.element.setAttribute(
+        "data-islastviewedtopic",
+        opts.isLastViewedTopic
+      );
+      this.element.addEventListener("animationend", () => {
+        this.element.classList.remove("highlighted");
+      });
+      this.element.querySelector(".main-link .title").focus();
     });
   },
 
@@ -279,4 +295,20 @@ export default Component.extend({
       this.highlight();
     }
   }),
+
+  @bind
+  _onTitleFocus() {
+    if (this.element && !this.isDestroying && !this.isDestroyed) {
+      const mainLink = this.element.querySelector(".main-link");
+      mainLink.classList.add("focused");
+    }
+  },
+
+  @bind
+  _onTitleBlur() {
+    if (this.element && !this.isDestroying && !this.isDestroyed) {
+      const mainLink = this.element.querySelector(".main-link");
+      mainLink.classList.remove("focused");
+    }
+  },
 });

app/assets/stylesheets/common/base/_topic-list.scss

@@ -234,6 +234,15 @@
     .raw-topic-link > * {
       pointer-events: none;
     }
+
+    &.focused {
+      box-shadow: inset 3px 0 0 var(--tertiary);
+    }
+    /* we have a custom focus indicator so we can remove the native one */
+    .title:focus,
+    .title:focus-visible {
+      outline: none;
+    }
   }
 
   .unread-indicator {