A11Y: remove heading tags from usercards (#27926)

app/assets/javascripts/discourse/app/components/group-card-contents.hbs

@@ -30,17 +30,19 @@
         </div>
         <div class="names">
           <span>
-            <h1 class={{this.group.name}}>
+            <div class="names__primary {{this.group.name}}">
               <a
                 {{on "click" this.handleShowGroup}}
                 href={{this.groupPath}}
                 class="group-page-link"
               >{{this.group.name}}</a>
-            </h1>
+            </div>
             {{#if this.group.full_name}}
-              <h2 class="full-name">{{this.group.full_name}}</h2>
+              <div class="names__secondary full-name">
+                {{this.group.full_name}}
+              </div>
             {{else}}
-              <h2 class="username">{{this.group.name}}</h2>
+              <div class="names__secondary username">{{this.group.name}}</div>
             {{/if}}
           </span>
         </div>

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

@@ -52,8 +52,9 @@
           </div>
         </div>
         <div class="names">
-          <h1
-            class="{{this.staff}}
+          <div
+            class="names__primary
+              {{this.staff}}
               {{this.newUser}}
               {{if this.nameFirst 'full-name' 'username'}}"
           >
@@ -87,33 +88,33 @@
                 {{user-status this.user currentUser=this.currentUser}}
               </a>
             {{/if}}
-          </h1>
+          </div>
           <PluginOutlet
             @name="user-card-after-username"
             @connectorTagName="div"
             @outletArgs={{hash user=this.user showUser=this.handleShowUser}}
           />
           {{#if this.nameFirst}}
-            <h2 class="username">{{this.user.username}}</h2>
+            <div class="names__secondary username">{{this.user.username}}</div>
           {{else}}
             {{#if this.user.name}}
-              <h2 class="full-name">{{this.user.name}}</h2>
+              <div class="names__secondary full-name">{{this.user.name}}</div>
             {{/if}}
           {{/if}}
           {{#if this.user.title}}
-            <h2>{{this.user.title}}</h2>
+            <div class="names__secondary">{{this.user.title}}</div>
           {{/if}}
           {{#if this.user.staged}}
-            <h2 class="staged">{{i18n "user.staged"}}</h2>
+            <div class="names__secondary staged">{{i18n "user.staged"}}</div>
           {{/if}}
           {{#if this.hasStatus}}
-            <h3 class="user-status">
+            <div class="user-status">
               {{html-safe this.userStatusEmoji}}
               <span class="user-status__description">
                 {{this.user.status.description}}
               </span>
               {{format-date this.user.status.ends_at format="tiny"}}
-            </h3>
+            </div>
           {{/if}}
           <div>
             <PluginOutlet
@@ -296,25 +297,29 @@
         {{#unless this.contentHidden}}
           <div class="metadata">
             {{#if this.user.last_posted_at}}
-              <h3><span class="desc">{{i18n "last_post"}}</span>
-                {{format-date this.user.last_posted_at leaveAgo="true"}}</h3>
+              <div class="metadata__last-posted">
+                <span class="desc">{{i18n "last_post"}}</span>
+                {{format-date this.user.last_posted_at leaveAgo="true"}}</div>
             {{/if}}
-            <h3><span class="desc">{{i18n "joined"}}</span>
-              {{format-date this.user.created_at leaveAgo="true"}}</h3>
+            <div class="metadata__user-created">
+              <span class="desc">{{i18n "joined"}}</span>
+              {{format-date this.user.created_at leaveAgo="true"}}</div>
             {{#if this.user.time_read}}
-              <h3 title={{this.timeReadTooltip}}>
+              <div class="metadata__time-read" title={{this.timeReadTooltip}}>
                 <span class="desc">{{i18n "time_read"}}</span>
                 {{format-duration this.user.time_read}}
                 {{#if this.showRecentTimeRead}}
-                  <span>({{i18n
+                  <span>
+                    ({{i18n
                       "time_read_recently"
                       time_read=this.recentTimeRead
-                    }})</span>
+                    }})
+                  </span>
                 {{/if}}
-              </h3>
+              </div>
             {{/if}}
             {{#if this.showCheckEmail}}
-              <h3 class="email">
+              <div class="metadata__email">
                 {{d-icon "envelope" title="user.email.title"}}
                 {{#if this.user.email}}
                   {{this.user.email}}
@@ -326,7 +331,7 @@
                     class="btn-primary"
                   />
                 {{/if}}
-              </h3>
+              </div>
             {{/if}}
             <PluginOutlet
               @name="user-card-metadata"

app/assets/javascripts/discourse/tests/acceptance/user-card-test.js

@@ -57,9 +57,9 @@ acceptance(
       await click('a[data-user-card="eviltrout"]');
 
       assert
-        .dom(".user-card h1.username .name-username-wrapper")
+        .dom(".user-card .username .name-username-wrapper")
         .hasText("eviltrout");
-      assert.dom(".user-card h2.full-name").hasText("Robin Ward");
+      assert.dom(".user-card .full-name").hasText("Robin Ward");
     });
   }
 );
@@ -79,9 +79,9 @@ acceptance(
       await click('a[data-user-card="eviltrout"]');
 
       assert
-        .dom(".user-card h1.full-name .name-username-wrapper")
+        .dom(".user-card .full-name .name-username-wrapper")
         .hasText("Robin Ward");
-      assert.dom(".user-card h2.username").hasText("eviltrout");
+      assert.dom(".user-card .username").hasText("eviltrout");
     });
   }
 );
@@ -100,7 +100,7 @@ acceptance("User Card - User Status", function (needs) {
     await visit("/t/internationalization-localization/280");
     await click('a[data-user-card="charlie"]');
 
-    assert.dom(".user-card h3.user-status").exists();
+    assert.dom(".user-card .user-status").exists();
   });
 
   test("doesn't show user status if disabled", async function (assert) {
@@ -109,7 +109,7 @@ acceptance("User Card - User Status", function (needs) {
     await visit("/t/internationalization-localization/280");
     await click('a[data-user-card="charlie"]');
 
-    assert.dom(".user-card h3.user-status").doesNotExist();
+    assert.dom(".user-card .user-status").doesNotExist();
   });
 });
 

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

@@ -8,7 +8,8 @@
   }
 }
 
-.user-card {
+.user-card,
+.group-card {
   --card-width: 39em;
   --avatar-width: 8em;
   --avatar-margin: -3.3em; // extends the avatar above the card
@@ -114,15 +115,21 @@
   .btn {
     margin-bottom: 5px;
   }
-  h1 {
+  .names__primary {
     line-height: var(--line-height-medium);
+    font-size: var(--font-up-5);
+    font-weight: bold;
     .d-icon {
       color: var(--primary);
     }
   }
-  h3 {
-    display: inline;
-    margin-right: 0.5em;
+  .names__secondary {
+    font-size: var(--font-up-1);
+  }
+  .metadata {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.15em 0.5em;
     color: var(--primary);
     &.email,
     .desc,
@@ -130,22 +137,18 @@
       color: var(--primary-high);
     }
   }
-  h1,
-  h2,
-  h3 {
+
+  .names__secondary,
+  [class*="metadata__"] {
     margin: 0;
     @include ellipsis;
   }
-  h1,
-  h2 {
+  .names__primary,
+  .names__secondary {
     a {
       color: var(--primary);
     }
   }
-  h2,
-  h3 {
-    font-weight: normal;
-  }
   p {
     margin: 0 0 5px 0;
   }
@@ -270,6 +273,28 @@
       @extend .user-badge;
     }
   }
+
+  .user-status {
+    display: flex;
+
+    img.emoji {
+      margin-bottom: 1px;
+      margin-right: 0.3em;
+    }
+
+    .relative-date {
+      flex: 1 0 auto;
+      text-align: left;
+      font-size: var(--font-down-3);
+      padding-top: 0.5em;
+      margin-left: 0.6em;
+      color: var(--primary-medium);
+    }
+
+    &__description {
+      @include ellipsis;
+    }
+  }
 }
 
 // styles for group cards only
@@ -315,21 +340,3 @@
     }
   }
 }
-
-h3.user-status {
-  display: flex;
-
-  img.emoji {
-    margin-bottom: 1px;
-    margin-right: 0.3em;
-  }
-
-  .relative-date {
-    flex: 1 0 auto;
-    text-align: left;
-    font-size: var(--font-down-3);
-    padding-top: 0.5em;
-    margin-left: 0.6em;
-    color: var(--primary-medium);
-  }
-}

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

@@ -13,24 +13,18 @@
       }
     }
   }
-  h1 {
+  .names__primary {
     .d-icon {
       font-size: var(--font-down-1);
     }
   }
-  h2 {
-    font-size: var(--font-up-1);
-  }
-  h3 {
-    font-size: var(--font-0);
-  }
 
   @include breakpoint("mobile-extra-large") {
     // important for keeping the usercard uncropped
     // at 200% - 400% zoom levels
     --avatar-width: 4em;
     --avatar-margin: 0;
-    .names h1 {
+    .names__primary {
       font-size: var(--font-up-2);
     }
     .first-row {

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

@@ -40,16 +40,16 @@
       }
     }
   }
-  h1 {
+  .names__primary {
     font-size: var(--font-up-3);
     .d-icon {
       font-size: var(--font-down-2);
     }
   }
-  h2 {
+  .names__secondary {
     font-size: var(--font-0);
   }
-  h3 {
+  .user-status {
     font-size: var(--font-down-1);
   }
 }