A11Y: Improve setting focus to post (#23243)

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() {

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")) {

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),

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, {

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 {

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;
 }