From ad9c7797ec2c3e35046498b5b6bac83f819eefc3 Mon Sep 17 00:00:00 2001
From: Jacob Herrington <jacobherringtondeveloper@gmail.com>
Date: Wed, 17 Jun 2020 03:48:38 -0500
Subject: [PATCH] Fix accessibility warnings from axe (#8718)

---
 app/assets/stylesheets/scaffolds.scss    | 9 +++++++++
 app/views/articles/index.html.erb        | 2 +-
 app/views/dashboards/_analytics.html.erb | 6 ++++--
 app/views/dashboards/show.html.erb       | 7 ++++---
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index 6ca7055af..627843f28 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -65,6 +65,15 @@ body {
   font-size: 18px;
 }
 
+/* Hide headers for screen readers */
+.visually-hidden-header {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 a {
   color: var(--link-brand-color);
   text-decoration: none;
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index b4f36f303..c8c12ae97 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -37,7 +37,7 @@
 
     <%# BEGIN Feed menu bar %>
     <main class="articles-list crayons-layout__content" id="articles-list" role="main">
-      <h1 style="position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;">Articles</h1>
+      <h1 class="visually-hidden-header">Articles</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/dashboards/_analytics.html.erb b/app/views/dashboards/_analytics.html.erb
index c51528ca3..e6ab64aa6 100644
--- a/app/views/dashboards/_analytics.html.erb
+++ b/app/views/dashboards/_analytics.html.erb
@@ -4,14 +4,16 @@
   <div class="dashboard-analytics-header">
     <span><%= number_with_delimiter(@articles.sum(&:public_reactions_count), delimeter: ",") %></span>
     <div class="dashboard-analytics-sub-indicator">
-      <img src="<%= asset_path "emoji/emoji-one-heart.png" %>" /><img src="<%= asset_path "emoji/emoji-one-unicorn.png" %>" /><img src="<%= asset_path "emoji/emoji-one-bookmark.png" %>" />
+      <img src="<%= asset_path "emoji/emoji-one-heart.png" %>" alt="heart" />
+      <img src="<%= asset_path "emoji/emoji-one-unicorn.png" %>" alt="unicorn" />
+      <img src="<%= asset_path "emoji/emoji-one-bookmark.png" %>" alt="bookmark" />
       Total Post Reactions
     </div>
   </div>
   <div class="dashboard-analytics-header" id="dashboard-analytics-header">
     <span><%= num_views > 500 ? number_with_delimiter(num_views, delimeter: ",") : "under 500" %></span>
     <div class="dashboard-analytics-sub-indicator">
-      <img id="dashboard-analytics-image" src="<%= asset_path "emoji/apple-eyes.png" %>" />
+      <img id="dashboard-analytics-image" src="<%= asset_path "emoji/apple-eyes.png" %>" alt="eyes" />
       Total Post Views
     </div>
   </div>
diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb
index bc23a6ee6..db2c81097 100644
--- a/app/views/dashboards/show.html.erb
+++ b/app/views/dashboards/show.html.erb
@@ -1,6 +1,7 @@
 <% title "Dashboard" %>
 
-<div class="dashboard-container" id="user-dashboard">
+<main class="dashboard-container" id="user-dashboard">
+  <h1 class="visually-hidden-header">User Dashboard</h1>
   <%= render "actions" %>
   <% if @organizations && @organizations.size > 0 && (params[:which].blank? || params[:which] == "organization") %>
     <h1>
@@ -26,7 +27,7 @@
         <a class="video-upload-cta cta" href="/listings/dashboard" data-no-instant>
           Create/Manage Listings
         </a>
-      <%= select_tag "dashhboard_sort", options_for_select(sort_options, params[:sort]) %>
+      <%= select_tag "dashhboard_sort", options_for_select(sort_options, params[:sort]), 'aria-label': 'Sort By' %>
       <% if @articles.any? {|article| article.archived } %>
         <%= link_to "Show archived", "javascript:;", id: "toggleArchivedLink" %>
       <% end %>
@@ -52,4 +53,4 @@
       <h3>Also check out the <a href="/welcome" data-no-instant>Welcome Thread</a> to introduce yourself!</h3>
     </div>
   <% end %>
-</div>
+</main>