From b04b5bcb577a421b414ecbaa584665830cdbfbe0 Mon Sep 17 00:00:00 2001
From: Marcy Sutton <holla@marcysutton.com>
Date: Fri, 4 Dec 2020 06:41:45 -0800
Subject: [PATCH] Headings and alt text roundup (#11721)

* Adjust heading order

No skipping levels, adding an h1 for the homepage

* Add missing image alt text

* Update after PR review

* Update test snapshot

Co-authored-by: rhymes <rhymes@hey.com>
---
 app/assets/javascripts/utilities/buildArticleHTML.js |  4 ++--
 .../__tests__/__snapshots__/Article.test.jsx.snap    |  8 ++++----
 app/javascript/articles/components/ContentTitle.jsx  |  4 ++--
 app/javascript/listings/components/MessageModal.jsx  |  1 +
 app/views/articles/_full_comment_area.html.erb       |  2 +-
 app/views/articles/_sidebar_nav.html.erb             |  4 ++--
 app/views/articles/index.html.erb                    |  3 ++-
 app/views/articles/tag_index.html.erb                |  2 +-
 app/views/onboardings/_task_card.html.erb            |  2 +-
 app/views/tags/index.html.erb                        |  2 +-
 app/views/users/_comments_section.html.erb           | 12 ++++++------
 11 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index 80baaa32e..db76a5b54 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -289,11 +289,11 @@ function buildArticleHTML(article) {
               ${meta}
             </div>\
             <div class="crayons-story__indention">
-              <h2 class="crayons-story__title">
+              <h3 class="crayons-story__title">
                 <a href="${article.path}" id="article-link-${article.id}">
                   ${filterXSS(article.title)}
                 </a>
-              </h2>\
+              </h3>\
               <div class="crayons-story__tags">
                 ${tagString}
               </div>\
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
index 8ba210792..c3d8fb0a1 100644
--- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
+++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
@@ -82,7 +82,7 @@ Object {
             <div
               class="crayons-story__indention"
             >
-              <h2
+              <h3
                 class="crayons-story__title"
               >
                 <a
@@ -93,7 +93,7 @@ Object {
                     Unbranded Home Loan Account
                   </span>
                 </a>
-              </h2>
+              </h3>
               <div
                 class="crayons-story__tags"
               >
@@ -294,7 +294,7 @@ Object {
           <div
             class="crayons-story__indention"
           >
-            <h2
+            <h3
               class="crayons-story__title"
             >
               <a
@@ -305,7 +305,7 @@ Object {
                   Unbranded Home Loan Account
                 </span>
               </a>
-            </h2>
+            </h3>
             <div
               class="crayons-story__tags"
             >
diff --git a/app/javascript/articles/components/ContentTitle.jsx b/app/javascript/articles/components/ContentTitle.jsx
index 1909ff020..bcd2212ce 100644
--- a/app/javascript/articles/components/ContentTitle.jsx
+++ b/app/javascript/articles/components/ContentTitle.jsx
@@ -2,7 +2,7 @@ import { h } from 'preact';
 import { articlePropTypes } from '../../common-prop-types';
 
 export const ContentTitle = ({ article }) => (
-  <h2 className="crayons-story__title">
+  <h3 className="crayons-story__title">
     <a href={article.path} id={`article-link-${article.id}`}>
       {article.class_name === 'PodcastEpisode' && (
         <span className="crayons-story__flare-tag">podcast</span>
@@ -18,7 +18,7 @@ export const ContentTitle = ({ article }) => (
       {/* eslint-disable-next-line react/no-danger */}
       <span dangerouslySetInnerHTML={{ __html: filterXSS(article.title) }} />
     </a>
-  </h2>
+  </h3>
 );
 
 ContentTitle.propTypes = {
diff --git a/app/javascript/listings/components/MessageModal.jsx b/app/javascript/listings/components/MessageModal.jsx
index 573b49935..84d179a08 100644
--- a/app/javascript/listings/components/MessageModal.jsx
+++ b/app/javascript/listings/components/MessageModal.jsx
@@ -35,6 +35,7 @@ const MessageModal = ({
         id="new-message"
         className="crayons-textfield mb-0"
         placeholder="Enter your message here..."
+        aria-label="Message"
       />
       <p className="mb-4 fs-s color-base-60">
         {isCurrentUserOnListing &&
diff --git a/app/views/articles/_full_comment_area.html.erb b/app/views/articles/_full_comment_area.html.erb
index a7d3e5fd0..a2a9cdfc0 100644
--- a/app/views/articles/_full_comment_area.html.erb
+++ b/app/views/articles/_full_comment_area.html.erb
@@ -2,7 +2,7 @@
   <section id="comments" data-updated-at="<%= Time.current %>" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
     <% if @article.show_comments %>
       <header class="relative flex justify-between items-center mb-6">
-        <h3 class="crayons-subtitle-1">Discussion</h3>
+        <h2 class="crayons-subtitle-1">Discussion</h2>
         <div id="comment-subscription">
           <div role="presentation" class="crayons-btn-group">
             <span class="crayons-btn crayons-btn--outlined">Subscribe</span>
diff --git a/app/views/articles/_sidebar_nav.html.erb b/app/views/articles/_sidebar_nav.html.erb
index 0846dd07c..d4b92679f 100644
--- a/app/views/articles/_sidebar_nav.html.erb
+++ b/app/views/articles/_sidebar_nav.html.erb
@@ -7,7 +7,7 @@
       </span>
 
       <div class="flex-1">
-        <h4 class="fs-base fw-bold" id="sidebar-profile--name"></h4>
+        <h2 class="fs-base fw-bold" id="sidebar-profile--name"></h2>
         <small class="fs-s opacity-75" id="sidebar-profile--username"></small>
       </div>
     </a>
@@ -50,7 +50,7 @@
     <header class="p-2 pr-0 flex items-center justify-between">
       <h3 class="crayons-subtitle-3">My Tags</h3>
       <a href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="Customize tag priority" title="Customize tag priority">
-        <%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon") %>
+        <%= inline_svg_tag("cog.svg", class: "crayons-icon") %>
       </a>
     </header>
     <div id="sidebar-nav-followed-tags" class="overflow-y-auto mb-2" style="max-height: 42vh;"></div>
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index 68ed4bf64..e5f8825d8 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -36,7 +36,8 @@
 
     <%# BEGIN Feed menu bar %>
     <main class="articles-list crayons-layout__content" id="articles-list" role="main">
-      <h1 class="visually-hidden-header">Articles</h1>
+      <h1 class="visually-hidden-header"><%= community_name %></h1>
+
       <%= render(partial: "onboardings/task_card") if user_signed_in? %>
 
       <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
diff --git a/app/views/articles/tag_index.html.erb b/app/views/articles/tag_index.html.erb
index 233c6da06..15361aba0 100644
--- a/app/views/articles/tag_index.html.erb
+++ b/app/views/articles/tag_index.html.erb
@@ -8,7 +8,7 @@
     <header class="tag-header crayons-card branded-4" style="border-top-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>">
       <div class="flex gap-4">
         <% if @tag_model.badge_id && @tag_model.badge %>
-            <img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" class="" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />
+            <img src="<%= optimized_image_url(@tag_model.badge.badge_image_url, width: 64) %>" alt="" class="" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg); width: 64px; height: 64px;" />
         <% end %>
         <div class="flex flex-col w-100 justify-center">
           <div class="flex justify-between items-center">
diff --git a/app/views/onboardings/_task_card.html.erb b/app/views/onboardings/_task_card.html.erb
index 933535fdd..43a0a602c 100644
--- a/app/views/onboardings/_task_card.html.erb
+++ b/app/views/onboardings/_task_card.html.erb
@@ -27,7 +27,7 @@
     <img alt="onboarding task card image" class="task-card-image" src="<%= safe_logo_url(SiteConfig.onboarding_taskcard_image) %>" />
   </div>
 
-  <h1 class="task-card-title" id="task-card-title">You're now a part of the community!</h1>
+  <h2 class="task-card-title" id="task-card-title">You're now a part of the community!</h2>
   <p id="task-card-subtitle" class="task-card-subtitle">SUGGESTED THINGS YOU CAN DO</p>
   <ul class="task-card-actions">
     <li class="task-card-action">
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 9c321364c..09fdf73ba 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -54,7 +54,7 @@
         <% end %>
 
         <% if tag.badge_id && tag.badge %>
-          <img src="<%= optimized_image_url(tag.badge.badge_image_url, width: 180) %>" style="width: 64px; height: 64px; transform: rotate(<%= -25 + (tag.id.digits.first * 5) %>deg);" class="right-1 bottom-1 absolute" />
+          <img src="<%= optimized_image_url(tag.badge.badge_image_url, width: 180) %>" style="width: 64px; height: 64px; transform: rotate(<%= -25 + (tag.id.digits.first * 5) %>deg);" class="right-1 bottom-1 absolute" alt="" />
         <% end %>
       </div>
     <% end %>
diff --git a/app/views/users/_comments_section.html.erb b/app/views/users/_comments_section.html.erb
index 37d546e33..3a788edab 100644
--- a/app/views/users/_comments_section.html.erb
+++ b/app/views/users/_comments_section.html.erb
@@ -3,13 +3,13 @@
     <% if @comments.present? %>
       <% if params[:view] == "comments" %>
         <div class="crayons-card__header">
-          <h4 class="crayons-subtitle-2">
+          <h3 class="crayons-subtitle-2">
             <% if @user.comments_count > 250 %>
               Last 250 comments
             <% else %>
               All <%= @user.comments_count %> comments
             <% end %>
-          </h4>
+          </h3>
           <div class="crayons-card__actions">
             <a href="<%= @user.path %>" class="crayons-link--branded fs-base">
               View all activity
@@ -18,18 +18,18 @@
         </div>
       <% else %>
         <div class="crayons-card__header">
-          <h4 class="crayons-subtitle-2">
+          <h3 class="crayons-subtitle-2">
             Recent comments
-          </h4>
+          </h3>
         </div>
       <% end %>
     <% end %>
     <% @comments.each do |comment| %>
       <% if comment.commentable.present? && comment.commentable.published && !comment.deleted %>
         <a href="<%= comment.path %>" class="profile-comment-row ">
-          <h5 class="fw-bold fs-base m-0 mb-1">
+          <h4 class="fw-bold fs-base m-0 mb-1">
             <%= comment.commentable.title %>
-          </h5>
+          </h4>
           <div class="inline-flex items-center fs-s gap-2">
             <p class="color-base-80">
               <%= truncate(strip_tags(comment.processed_html), length: 64).html_safe %>