From a94834abd5f417562fe296b0354f48f8c3f6238e Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 25 Aug 2023 14:45:56 -0400
Subject: [PATCH] A11Y: Improve setting focus to post (#23243)

---
 .../discourse/app/lib/keyboard-shortcuts.js          |  4 +++-
 .../javascripts/discourse/app/lib/utilities.js       |  3 ++-
 .../discourse/app/widgets/post-small-action.js       |  3 ---
 app/assets/javascripts/discourse/app/widgets/post.js |  6 +-----
 app/assets/stylesheets/common/base/topic-post.scss   | 12 +++++++-----
 .../common/components/keyboard_shortcuts.scss        |  4 ----
 6 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js b/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js
index 5eb93bec091..a8dea9a1fc8 100644
--- a/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js
+++ b/app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js
@@ -803,7 +803,9 @@ export default {
   },
 
   _onScrollEndsCallback() {
-    document.querySelector(".topic-post.selected span.tabLoc")?.focus();
+    document
+      .querySelector(".topic-post.selected a:not([tabindex='-1'])")
+      ?.focus();
   },
 
   categoriesTopicsList() {
diff --git a/app/assets/javascripts/discourse/app/lib/utilities.js b/app/assets/javascripts/discourse/app/lib/utilities.js
index 2ec9a246c54..e65deb56158 100644
--- a/app/assets/javascripts/discourse/app/lib/utilities.js
+++ b/app/assets/javascripts/discourse/app/lib/utilities.js
@@ -77,7 +77,8 @@ export function highlightPost(postNumber) {
     return;
   }
 
-  container.querySelector(".tabLoc")?.focus();
+  // sets focus to the first focusable anchor in the post
+  container.querySelector("a:not([tabindex='-1'])")?.focus();
 
   const element = container.querySelector(".topic-body");
   if (!element || element.classList.contains("highlighted")) {
diff --git a/app/assets/javascripts/discourse/app/widgets/post-small-action.js b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
index ddc56a676a7..1c186db0b38 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-small-action.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
@@ -190,9 +190,6 @@ 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),
diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
index 446f1c0d6e6..f3d5aac70aa 100644
--- a/app/assets/javascripts/discourse/app/widgets/post.js
+++ b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -751,11 +751,7 @@ createWidget("post-article", {
   },
 
   html(attrs, state) {
-    const rows = [
-      h("span.tabLoc", {
-        attributes: { "aria-hidden": true, tabindex: -1 },
-      }),
-    ];
+    const rows = [];
     if (state.repliesAbove.length) {
       const replies = state.repliesAbove.map((p) => {
         return this.attach("embedded-post", p, {
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 751f93a7fa5..32a4d597042 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1170,11 +1170,6 @@ blockquote > *:last-child {
     );
     min-width: 0; // Allows flex container to shrink
 
-    .avatar {
-      margin-right: 0.5em;
-      float: left;
-    }
-
     p {
       margin: 0;
       padding: 0.15em 0.5em 0 0;
@@ -1183,6 +1178,13 @@ blockquote > *:last-child {
 
   .small-action-contents {
     flex: 1 1 auto;
+    display: flex;
+    a.trigger-user-card {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 0.5em;
+      border-radius: 1em;
+    }
   }
 
   .small-action-buttons {
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index 42f03026d5e..cbf49758893 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -15,10 +15,6 @@
   box-shadow: -3px 0 0 var(--danger);
 }
 
-.tabLoc:focus {
-  outline: none;
-}
-
 .latest .featured-topic {
   padding-left: 4px;
 }