FIX: don't nest all user info in one link (#23783)

app/assets/javascripts/discourse/app/components/about-page-users.hbs

@@ -1,20 +1,26 @@
 {{#each this.usersTemplates as |userTemplate|}}
   <div data-username={{userTemplate.username}} class="user-info small">
-    <a
+    <div class="user-image">
-      href={{userTemplate.userPath}}
+      <div class="user-image-inner">
-      data-user-card={{userTemplate.username}}
+        <a
-      aria-label={{i18n
+          href={{userTemplate.userPath}}
-        "user.profile_possessive"
+          data-user-card={{userTemplate.username}}
-        username=userTemplate.username
+          aria-hidden="true"
-      }}
+        >
-    >
-      <div class="user-image">
-        <div class="user-image-inner">
           {{html-safe userTemplate.avatar}}
-        </div>
+        </a>
       </div>
-      <div class="user-detail">
+    </div>
-        <div class="name-line">
+    <div class="user-detail">
+      <div class="name-line">
+        <a
+          href={{userTemplate.userPath}}
+          data-user-card={{userTemplate.username}}
+          aria-label={{i18n
+            "user.profile_possessive"
+            username=userTemplate.username
+          }}
+        >
           <span class="username">
             {{#if
               userTemplate.prioritizeName
@@ -25,9 +31,9 @@
               userTemplate.prioritizeName
             }}{{userTemplate.username}}{{else}}{{userTemplate.name}}{{/if}}
           </span>
-        </div>
+        </a>
-        <div class="title">{{userTemplate.title}}</div>
       </div>
-    </a>
+      <div class="title">{{userTemplate.title}}</div>
+    </div>
   </div>
 {{/each}}

app/assets/javascripts/discourse/app/components/user-info.hbs

@@ -1,55 +1,56 @@
-<a
+{{#if this.includeAvatar}}
-  href={{if this.includeLink this.userPath}}
+  <div class="user-image">
-  data-user-card={{if this.includeLink @user.username}}
+    <div class="user-image-inner">
-  aria-label={{if
+      <a
-    (and this.includeLink @user.username)
+        href={{this.userPath}}
-    (i18n "user.profile_possessive" username=@user.username)
+        data-user-card={{@user.username}}
-  }}
+        aria-hidden="true"
->
+      >{{avatar @user imageSize="large"}}</a>
-  {{#if this.includeAvatar}}
+      <UserAvatarFlair @user={{@user}} />
-    <div class="user-image">
-      <div class="user-image-inner">
-        {{avatar @user imageSize="large"}}
-        <UserAvatarFlair @user={{@user}} />
-      </div>
     </div>
-  {{/if}}
+  </div>
-  <div class="user-detail">
+{{/if}}
-    <div class="name-line">
+<div class="user-detail">
+  <div class="name-line">
+    {{#if this.includeLink}}
+      <a href={{this.userPath}} data-user-card={{@user.username}}>
+        <span class={{if this.nameFirst "name" "username"}}>
+          {{if this.nameFirst @user.name (format-username @user.username)}}
+        </span>
+        <span class={{if this.nameFirst "username" "name"}}>
+          {{if this.nameFirst (format-username @user.username) @user.name}}
+        </span>
+      </a>
+    {{else}}
       <span class={{if this.nameFirst "name" "username"}}>
         {{if this.nameFirst @user.name (format-username @user.username)}}
       </span>
       <span class={{if this.nameFirst "username" "name"}}>
         {{if this.nameFirst (format-username @user.username) @user.name}}
       </span>
-      {{#if (and @showStatus @user.status)}}
-        <UserStatusMessage
-          @status={{@user.status}}
-          @showDescription={{@showStatusDescription}}
-        />
-      {{/if}}
-      <span>
-        <PluginOutlet
-          @name="after-user-name"
-          @connectorTagName="span"
-          @outletArgs={{hash user=this.user}}
-        />
-      </span>
-    </div>
-    <div class="title">{{@user.title}}</div>
-    {{#if (has-block)}}
-      <div class="details">
-        {{yield}}
-      </div>
     {{/if}}
-  </div>
+    {{#if (and @showStatus @user.status)}}
-
+      <UserStatusMessage
-  <span>
+        @status={{@user.status}}
+        @showDescription={{@showStatusDescription}}
+      />
+    {{/if}}
     <PluginOutlet
-      @name="after-user-info"
+      @name="after-user-name"
-      @connectorTagName="div"
+      @connectorTagName="span"
       @outletArgs={{hash user=this.user}}
     />
-  </span>
+  </div>
+  <div class="title">{{@user.title}}</div>
+  {{#if (has-block)}}
+    <div class="details">
+      {{yield}}
+    </div>
+  {{/if}}
+</div>
 
-</a>
+<PluginOutlet
+  @name="after-user-info"
+  @connectorTagName="div"
+  @outletArgs={{hash user=this.user}}
+/>

app/assets/javascripts/discourse/tests/integration/components/user-info-test.js

@@ -33,10 +33,12 @@ module("Integration | Component | user-info", function (hooks) {
     );
 
     this.set("includeLink", true);
-    assert.ok(exists(`a[href="/u/${this.currentUser.username}"]`));
+    assert.ok(exists(`.name-line a[href="/u/${this.currentUser.username}"]`));
 
     this.set("includeLink", false);
-    assert.notOk(exists(`a[href="/u/${this.currentUser.username}"]`));
+    assert.notOk(
+      exists(`.name-line a[href="/u/${this.currentUser.username}"]`)
+    );
   });
 
   test("includeAvatar", async function (assert) {

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

@@ -1,10 +1,7 @@
 // Common styles for "user-info" component
 .user-info {
-  > a {
+  display: flex;
-    display: flex;
+  gap: 1em;
-    gap: 1em;
-    min-width: 0;
-  }
 
   .user-image-inner {
     position: relative;
@@ -13,21 +10,22 @@
 
   .user-detail {
     min-width: 0;
-    @include breakpoint(tablet) {
+    @include breakpoint(mobile-medium) {
       font-size: var(--font-down-1);
     }
 
     .name-line {
-      display: flex;
+      > a {
-      gap: 0.5em;
+        display: flex;
-      color: var(--primary-high);
+        gap: 0.5em;
+        color: var(--primary-high);
+      }
       .name,
       .username {
         @include ellipsis;
       }
 
       span:first-child {
-        flex: 0 0 auto;
         font-weight: bold;
       }
     }
@@ -40,7 +38,6 @@
     }
 
     .title {
-      margin-top: 0.25em;
       color: var(--primary-medium);
     }
   }