A11Y: Improve user card accessibility (#18348)

app/assets/javascripts/discourse/app/mixins/card-contents-base.js

@@ -1,5 +1,5 @@
 import { alias, match } from "@ember/object/computed";
-import { next, schedule, throttle } from "@ember/runloop";
+import { schedule, throttle } from "@ember/runloop";
 import DiscourseURL from "discourse/lib/url";
 import Mixin from "@ember/object/mixin";
 import afterTransition from "discourse/lib/after-transition";
@@ -7,6 +7,7 @@ import { escapeExpression } from "discourse/lib/utilities";
 import { inject as service } from "@ember/service";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import { bind } from "discourse-common/utils/decorators";
+import discourseLater from "discourse-common/lib/later";
 
 const DEFAULT_SELECTOR = "#main-outlet";
 
@@ -279,10 +280,10 @@ export default Mixin.create({
         // note: we DO NOT use afterRender here cause _positionCard may
         // run afterwards, if we allowed this to happen the usercard
         // may be offscreen and we may scroll all the way to it on focus
-        next(null, () => {
+        discourseLater(() => {
           const firstLink = this.element.querySelector("a");
           firstLink && firstLink.focus();
-        });
+        }, 350);
       }
     });
   },
@@ -364,8 +365,8 @@ export default Mixin.create({
   @bind
   _escListener(event) {
     if (this.visible && event.key === "Escape") {
-      this._close();
       this.cardTarget?.focus();
+      this._close();
       return;
     }
   },

app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs

@@ -36,12 +36,12 @@
         <div class="names">
           <h1 class="{{this.staff}} {{this.newUser}} {{if this.nameFirst "full-name" "username"}}">
             {{#if this.user.profile_hidden}}
-              <span class="name-username-wrapper">
+              <span id="discourse-user-card-title" class="name-username-wrapper">
                 {{if this.nameFirst this.user.name (format-username this.user.username)}}
               </span>
             {{else}}
               <a href={{this.user.path}} {{action "showUser" this.user}} class="user-profile-link">
-                <span class="name-username-wrapper">
+                <span id="discourse-user-card-title" class="name-username-wrapper">
                   {{if this.nameFirst this.user.name (format-username this.user.username)}}
                 </span>
                 {{user-status this.user currentUser=this.currentUser}}

app/assets/javascripts/discourse/app/templates/user-card.hbs

@@ -2,6 +2,5 @@
   <div class="card-cloak hidden"></div>
 {{/if}}
 
-<UserCardContents @topic={{this.topic.model}} @showUser={{action "showUser"}} @filterPosts={{action "filterPosts"}} @composePrivateMessage={{route-action "composePrivateMessage"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} />
-
+<UserCardContents @topic={{this.topic.model}} @showUser={{action "showUser"}} @filterPosts={{action "filterPosts"}} @composePrivateMessage={{route-action "composePrivateMessage"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} role="dialog" aria-labelledby="discourse-user-card-title"/>
 <GroupCardContents @topic={{this.topic.model}} @showUser={{action "showUser"}} @showGroup={{action "showGroup"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} />

app/assets/stylesheets/common/components/user-card.scss

@@ -53,7 +53,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       clear: both;
     }
     a.card-huge-avatar {
-      outline: none;
+      display: block;
     }
     .bio {
       @include line-clamp(2);
@@ -70,6 +70,11 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       .user-profile-link {
         display: flex;
         align-items: center;
+
+        &:focus {
+          border: 1px solid;
+          @include default-focus;
+        }
       }
 
       .d-icon {