Fix a11y issues flagged by axe on homepage (#8380)

* Fix a11y issues flagged by axe on homepage

This commit brings the number of violations found on homepage (local,
not prod) down from ~100 to ~10. It should have no serious impact on the
visual layout or design of the page.

* Change aria-labels to be consistent

app/views/articles/_sidebar.html.erb

@@ -1,6 +1,6 @@
 <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left crayons-layout__sidebar-left">
   <div class="sidebar-bg" id="sidebar-bg-left"></div>
-  <div class="side-bar">
+  <aside class="side-bar" aria-label="Primary sidebar">
     <% cache(cache_key_heroku_slug("main-sidebar-nav--#{user_signed_in?}"), expires_in: 15.minutes) do %>
       <%= render "articles/sidebar_nav" %>
       <div class="<%= "hidden" if user_signed_in? %> px-1" id="sponsorship-widget">
@@ -28,5 +28,5 @@
         </div>
       <% end %>
     <% end %>
-  </div>
+  </aside>
 </div>

app/views/articles/_sidebar_additional.html.erb

@@ -1,15 +1,15 @@
 <div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right crayons-layout__sidebar-right">
   <div class="sidebar-bg" id="sidebar-bg-right"></div>
-  <div class="side-bar sidebar-additional showing grid gap-4" id="sidebar-additional">
+  <aside class="side-bar sidebar-additional showing grid gap-4" id="sidebar-additional">
     <% unless user_signed_in? %>
-      <div class="crayons-card crayons-card--secondary signin-cta-widget">
+      <section class="crayons-card crayons-card--secondary signin-cta-widget">
         <header class="crayons-card__header">
           <h3 class="crayons-card__header__headline">Join <%= community_name %></h3>
         </header>
         <div class="p-4 grid gap-2">
           <%= render partial: "shared/authentication/providers_sidebar" %>
         </div>
-      </div>
+      </section>
     <% end %>
     <% cache(cache_key_heroku_slug("main-article-right-sidebar-discussions-#{params[:timeframe]}"), expires_in: (params[:timeframe].blank? ? 120 : 360).seconds) do %>
       <% @sidebar_ad = DisplayAd.for_display("sidebar_right") %>
@@ -22,7 +22,7 @@
       <%= render "articles/sidebar_campaign" if SiteConfig.campaign_sidebar_enabled? %>
 
       <% if params[:timeframe].blank? && @listings.any? %>
-        <div class="crayons-card crayons-card--secondary">
+        <section class="crayons-card crayons-card--secondary">
           <header class="crayons-card__header">
             <h3 class="crayons-card__header__headline">Listings</h3>
             <div class="crayons-card__actions">
@@ -39,11 +39,11 @@
             <% end %>
             <a class="crayons-link crayons-link--branded block align-center p-3 fw-medium fs-s w-100" href="/listings/new">Create a Listing</a>
           </div>
-        </div>
+        </section>
       <% end %>
 
       <% SiteConfig.sidebar_tags.each do |tag| %>
-        <div class="crayons-card crayons-card--secondary">
+        <section class="crayons-card crayons-card--secondary">
           <header class="crayons-card__header">
             <h3 class="crayons-card__header__headline"><a href="/t/<%= tag %>">#<%= tag %></a></h3>
           </header>
@@ -59,14 +59,14 @@
               <% end %>
             <% end %>
           </div>
-        </div>
+        </section>
       <% end %>
     <% end %>
     <% unless user_signed_in? %>
       <% cache("seo-boostable-posts-homepage-#{params[:timeframe]}", expires_in: 18.hours) do %>
         <% boostable_posts = Article.seo_boostable(nil, Timeframer.new(params[:timeframe]).datetime) %>
         <% if boostable_posts.present? %>
-          <div class="widget">
+          <section class="widget">
             <header>
               <h4>trending guides/resources</h4>
             </header>
@@ -77,11 +77,11 @@
                 <% end %>
               </div>
             </div>
-          </div>
+          </section>
         <% end %>
         <% recent_preamble_optimized_posts = Article.search_optimized(nil) %>
         <% if params[:timeframe].blank? && recent_preamble_optimized_posts.present? %>
-          <div class="widget">
+          <section class="widget">
             <header>
               <h4>recently queried</h4>
             </header>
@@ -92,9 +92,9 @@
                 <% end %>
               </div>
             </div>
-          </div>
+          </section>
         <% end %>
       <% end %>
     <% end %>
-  </div>
+  </aside>
 </div>

app/views/articles/_sidebar_campaign.html.erb

@@ -1,4 +1,4 @@
-<div class="crayons-card crayons-card--secondary">
+<section class="crayons-card crayons-card--secondary">
   <% if SiteConfig.campaign_sidebar_image && SiteConfig.campaign_url %>
     <a href="<%= SiteConfig.campaign_url %>">
       <img src="<%= SiteConfig.campaign_sidebar_image %>" class="block w-100 h-auto radius-default" width="1000" height="420" />
@@ -18,4 +18,4 @@
     <%= link_to "Share your project", "/new/#{SiteConfig.campaign_featured_tags.first}", class: "crayons-btn" %>
     <%= link_to "See all posts", "/t/#{SiteConfig.campaign_featured_tags.first}", class: "crayons-btn crayons-btn--secondary" %>
   </div>
-</div>
+</section>

app/views/articles/_sidebar_nav.html.erb

@@ -1,4 +1,4 @@
-<nav class="mb-6" id="sidebar-nav">
+<nav class="mb-6" id="sidebar-nav" aria-label="Primary sidebar nav">
   <% if user_signed_in? %>
     <a class="sidebar-profile" id="sidebar-profile" href="#">
       <img src="" class="sidebar-profile--avatar" id="sidebar-profile--avatar" alt="" width="48" height="48">
@@ -86,7 +86,7 @@
   </div>
 </nav>
 
-<nav class="sidebar-tags-browser mb-6 overflow-y-auto scrolling-touch">
+<nav class="sidebar-tags-browser mb-6 overflow-y-auto scrolling-touch" aria-label="Secondary sidebar nav">
   <% if user_signed_in? %>
     <header class="fs-xs color-base-50 ff-accent fw-bold p-2">MY TAGS</header>
     <div id="sidebar-nav-followed-tags" class="sidebar-nav-followed-tags"></div>

app/views/articles/index.html.erb

@@ -36,7 +36,8 @@
     <%= render "articles/sidebar" %>
 
     <%# BEGIN Feed menu bar %>
-    <div class="articles-list crayons-layout__content" id="articles-list">
+    <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>
       <%= 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">
@@ -81,7 +82,7 @@
       <div class="loading-articles" id="loading-articles">
         loading...
       </div>
-    </div>
+    </main>
 
     <%= render "articles/sidebar_additional" %>
   </div>

app/views/layouts/_top_bar.html.erb

@@ -1,6 +1,6 @@
 <div class="navigation-progress" id="navigation-progress">
 </div>
-<header class="top-bar" id="top-bar">
+<header class="top-bar" id="top-bar" role="banner">
   <a href="#articles-list" class="skip-content-link">Skip to content</a>
   <div class="top-bar__container">
     <a href="/" class="top-bar--logo" aria-label="<%= community_name %> Home"><%= logo_svg %></a>