From cffe2f1b29377f6d953d33a642a8f09be88209cf Mon Sep 17 00:00:00 2001
From: Joel Hawksley <joelhawksley@github.com>
Date: Wed, 31 May 2023 14:35:56 -0600
Subject: [PATCH] Add ARIA roles and labels to search, header, logo, mobile
 menu button, and main content (#1259)

This PR fixes several Axe errors I found while working on https://viewcomponent.org/. I did not see any visual regressions on my deploy, but I'd encourage testing with other sites.

---------

Co-authored-by: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
---
 _includes/components/search_header.html |  2 +-
 _includes/components/sidebar.html       |  6 +++---
 _includes/title.html                    |  2 +-
 _layouts/default.html                   | 22 +++++++++++-----------
 _sass/layout.scss                       |  7 +++++++
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/_includes/components/search_header.html b/_includes/components/search_header.html
index 98425d5..3562124 100644
--- a/_includes/components/search_header.html
+++ b/_includes/components/search_header.html
@@ -1,6 +1,6 @@
 {% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
 
-<div class="search">
+<div class="search" role="search">
   <div class="search-input-wrap">
     <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="{{ search_placeholder | strip_html | strip }}" aria-label="{{ search_placeholder | strip_html| strip }}" autocomplete="off">
     <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
diff --git a/_includes/components/sidebar.html b/_includes/components/sidebar.html
index 7dd7305..50e49aa 100644
--- a/_includes/components/sidebar.html
+++ b/_includes/components/sidebar.html
@@ -1,8 +1,8 @@
 <div class="side-bar">
-  <div class="site-header">
+  <div class="site-header" role="banner">
     <a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
-    <a href="#" id="menu-button" class="site-button">
-      <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
+    <button id="menu-button" class="site-button" aria-label="Open menu">
+      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
     </a>
   </div>
   <nav aria-label="Main" id="site-nav" class="site-nav">
diff --git a/_includes/title.html b/_includes/title.html
index 8bd3fa8..8f65336 100644
--- a/_includes/title.html
+++ b/_includes/title.html
@@ -1,5 +1,5 @@
 {% if site.logo %}
-  <div class="site-logo"></div>
+  <div class="site-logo" role="img" aria-label="{{ site.title }}"></div>
 {% else %}
   {{ site.title }}
 {% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 6be391e..59919dd 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -14,19 +14,19 @@ layout: table_wrappers
     {% include components/header.html %}
     <div id="main-content-wrap" class="main-content-wrap">
       {% include components/breadcrumbs.html %}
-      <div id="main-content" class="main-content" role="main">
-        {% if site.heading_anchors != false %}
-          {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
-        {% else %}
-          {{ content }}
-        {% endif %}
-
-        {% if page.has_children == true and page.has_toc != false %}
-          {% include components/children_nav.html %}
-        {% endif %}
+      <div id="main-content" class="main-content">
+        <main>
+          {% if site.heading_anchors != false %}
+            {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
+          {% else %}
+            {{ content }}
+          {% endif %}
 
+          {% if page.has_children == true and page.has_toc != false %}
+            {% include components/children_nav.html %}
+          {% endif %}
+        </main>
         {% include components/footer.html %}
-
       </div>
     </div>
     {% if site.search_enabled != false %}
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 027b388..013f9fb 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -145,6 +145,13 @@
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  text-align: inherit;
+  font: inherit;
+  border-radius: 0;
+  appearance: none;
 }
 
 @include mq(md) {