From f7907a36450773feb2a5822402c82367005ac0ff Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 20 Jan 2023 12:27:07 -0500
Subject: [PATCH] A11Y: remove heading tags from user profile (#19935)

---
 .../discourse/app/templates/user.hbs          | 47 ++++++-----
 app/assets/stylesheets/common/base/user.scss  | 79 +++++++++++--------
 app/assets/stylesheets/desktop/user.scss      | 37 ++-------
 app/assets/stylesheets/mobile/user.scss       |  8 --
 4 files changed, 82 insertions(+), 89 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/user.hbs b/app/assets/javascripts/discourse/app/templates/user.hbs
index 8d8b1e5d8d9..0fabbe379e6 100644
--- a/app/assets/javascripts/discourse/app/templates/user.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user.hbs
@@ -172,7 +172,10 @@
 
           <div class="primary-textual">
             <div class="user-profile-names">
-              <h1 class={{if this.nameFirst "full-name" "username"}}>
+              <div
+                class="{{if this.nameFirst 'full-name' 'username'}}
+                  user-profile-names__primary"
+              >
                 {{if
                   this.nameFirst
                   this.model.name
@@ -182,15 +185,22 @@
                 {{#if this.model.status}}
                   <UserStatusMessage @status={{this.model.status}} />
                 {{/if}}
-              </h1>
-              <h2 class={{if this.nameFirst "username" "full-name"}}>{{#if
+              </div>
+              <div
+                class="{{if this.nameFirst 'username' 'full-name'}}
+                  user-profile-names__secondary"
+              >{{#if
                   this.nameFirst
-                }}{{this.model.username}}{{else}}{{this.model.name}}{{/if}}</h2>
+                }}{{this.model.username}}{{else}}{{this.model.name}}{{/if}}</div>
               {{#if this.model.staged}}
-                <h2 class="staged">{{i18n "user.staged"}}</h2>
+                <div class="staged user-profile-names__secondary">{{i18n
+                    "user.staged"
+                  }}</div>
               {{/if}}
               {{#if this.model.title}}
-                <h3>{{this.model.title}}</h3>
+                <div
+                  class="user-profile-names__title"
+                >{{this.model.title}}</div>
               {{/if}}
               <PluginOutlet
                 @name="user-post-names"
@@ -201,9 +211,10 @@
             </div>
 
             {{#if this.showFeaturedTopic}}
-              <h3 class="featured-topic">
-                <span>{{i18n "user.featured_topic"}}</span>
-                <LinkTo
+              <div class="featured-topic user-profile__featured-topic">
+                <span title={{i18n "user.featured_topic"}}>
+                  {{d-icon "book"~}}
+                </span><LinkTo
                   @route="topic"
                   @models={{array
                     this.model.featured_topic.slug
@@ -212,19 +223,20 @@
                 >{{html-safe
                     (replace-emoji this.model.featured_topic.fancy_title)
                   }}</LinkTo>
-              </h3>
+              </div>
             {{/if}}
 
-            <h3 class="location-and-website">
+            <div
+              class="location-and-website user-profile__location-and-website"
+            >
               {{#if this.model.location}}<div
                   class="user-profile-location"
-                >{{d-icon "map-marker-alt"}}
+                >{{d-icon "map-marker-alt"~}}
                   {{this.model.location}}</div>{{/if}}
               {{#if this.model.website_name}}
-                <div class="user-profile-website">
-                  {{d-icon "globe"}}
-                  {{#if this.linkWebsite}}
-                    {{! template-lint-disable  }}
+                <div class="user-profile-website">{{d-icon "globe"~}}
+                  {{#if this.linkWebsite~}}
+                    {{~! template-lint-disable ~}}
                     <a
                       href={{this.model.website}}
                       rel="noopener {{unless
@@ -246,7 +258,7 @@
                 @connectorTagName="div"
                 @args={{hash model=this.model}}
               />
-            </h3>
+            </div>
 
             <div class="bio">
               {{#if this.model.suspended}}
@@ -405,7 +417,6 @@
             </dl>
             <PluginOutlet
               @name="user-profile-secondary"
-              @tagName="span"
               @connectorTagName="div"
               @args={{hash model=this.model}}
             />
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 7efebd72e23..3fce7fad8b2 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -104,7 +104,7 @@
 
       dl {
         margin: 0;
-        padding: 5px 10px;
+        padding: 0.25em 0;
         div {
           display: inline-flex;
           align-items: baseline;
@@ -148,28 +148,6 @@
       background: rgba(var(--secondary-rgb), 0.8);
       border-bottom: 1px solid var(--primary-low);
 
-      h1 {
-        font-size: var(--font-up-5);
-        font-weight: normal;
-        .d-icon {
-          font-size: 0.8em;
-        }
-      }
-
-      h2 {
-        font-weight: normal;
-        max-width: 100%;
-        @include ellipsis;
-      }
-
-      h3 {
-        font-weight: normal;
-        margin-bottom: 0.5em;
-        .d-icon:not(:first-of-type) {
-          margin-left: 10px;
-        }
-      }
-
       .groups {
         display: inline;
       }
@@ -186,10 +164,6 @@
         width: 100%;
         position: relative;
 
-        h1 {
-          font-weight: bold;
-        }
-
         .bio {
           max-height: 300px;
           overflow: auto;
@@ -235,15 +209,17 @@
             height: 45px;
           }
 
-          h1 {
+          .user-profile-names__primary {
             font-size: var(--font-up-3);
           }
 
-          h2 {
+          .user-profile-names__secondary {
             font-size: var(--font-up-1);
           }
-          h3,
-          h3.location-and-website {
+
+          .user-profile-names__title,
+          .user-profile__location-and-website,
+          .user-profile__featured-topic {
             display: none;
           }
         }
@@ -783,6 +759,47 @@
   font-style: italic;
 }
 
+.user-profile-names__primary,
+.user-profile-names__secondary {
+  max-width: 100%;
+  margin: 0;
+  @include ellipsis;
+}
+
+.user-profile-names__primary {
+  font-weight: bold;
+  font-size: var(--font-up-5);
+  line-height: var(--line-height-small);
+  .d-icon {
+    font-size: 0.8em;
+    vertical-align: baseline;
+  }
+}
+
+.user-profile-names__secondary {
+  font-size: var(--font-up-3);
+}
+
+.user-profile__featured-topic,
+.user-profile__location-and-website {
+  font-size: var(--font-0);
+  margin-top: 0.5em;
+  @include ellipsis;
+  .d-icon {
+    font-size: var(--font-down-1);
+    color: var(--primary-high);
+    margin-right: 0.33em;
+  }
+}
+
+.user-profile__location-and-website {
+  display: flex;
+  max-width: 100%;
+  .user-profile-location {
+    margin-right: 1em;
+  }
+}
+
 .selectable-avatars {
   max-height: 350px;
   margin-bottom: 1em;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 461e60a0a43..c847ae1f605 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -96,10 +96,6 @@
   .btn.right {
     float: right;
   }
-
-  h2 {
-    margin-bottom: 10px;
-  }
 }
 
 .pref-avatar {
@@ -158,30 +154,12 @@ table.user-invite-list {
         margin: 0 20px 10px 0;
       }
 
-      .primary {
-        .primary-textual {
-          padding: 0 4px 4px;
-          h1 {
-            max-width: 100%;
-            @include ellipsis;
-          }
-          .location-and-website {
-            display: flex;
-            max-width: 100%;
-            @include ellipsis;
-            .user-profile-location {
-              margin-right: 1em;
-            }
-          }
-        }
-
-        .bio {
-          max-width: 750px;
-        }
+      .primary-textual {
+        padding: 0 0 0.5em;
       }
 
-      .secondary {
-        margin-top: 16px;
+      .bio {
+        max-width: 750px;
       }
     }
 
@@ -198,7 +176,7 @@ table.user-invite-list {
     }
 
     .controls {
-      padding: 0 0 12px 0;
+      padding: 0;
       float: right;
       max-width: 13.5em;
 
@@ -283,11 +261,6 @@ table.user-invite-list {
     max-width: 100%;
   }
 
-  h3 {
-    color: var(--primary);
-    margin: 20px 0 10px 0;
-  }
-
   .category-selector,
   .tag-chooser,
   textarea,
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index f55a1ade01e..a5b3e2091a5 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -102,14 +102,6 @@
     .details {
       margin-bottom: 12px;
 
-      h1 {
-        line-height: var(--line-height-small);
-      }
-
-      h2 {
-        line-height: var(--line-height-medium);
-      }
-
       .user-profile-avatar {
         .avatar-flair {
           right: 2px;