Merge pull request #3718 from mlama007/accessibility-nav-TOC

Accessibility updates to Main Nav and Table of Contents

Author: ahpook

_includes/nav.html

@@ -1,6 +1,21 @@
 {% assign t = site.data.locales[page.lang][page.lang] %}
 <nav class="main-nav">
   <div class="container-lg mx-auto clearfix">
+    {% if page.layout != 'index' %}
+    <div class="float-sm-left pl-3 breadcrumb">
+      <p class="my-0 py-3 py-sm-4 text-gray">
+        {% assign lang_url = '/' | append: page.lang | append: '/' %}
+        {% assign lang_index = site.pages | where: "url", lang_url %}
+        {% if page.lang != 'en' and lang_index.size > 0 %}
+        <a href="{{ lang_url }}" class="text-gray">{{ site.title }}</a>
+        {% elsif page.lang != 'en' %}
+        <a href="{{ '/' | relative_url }}" class="text-gray">{{ site.title }}</a>
+        {% else %}
+        <a href="/" class="text-gray">{{ site.title }}</a>
+        {% endif %}
+      </p>
+    </div>
+    {% endif %}
     <div class="float-sm-right">
       <ul
         class="main-links d-flex flex-wrap flex-items-stretch flex-justify-center border-left border-bottom border-sm-0 list-style-none">
@@ -34,20 +49,5 @@
         {% endif %}
       </ul>
     </div>
-    {% if page.layout != 'index' %}
-    <div class="float-sm-left pl-3 breadcrumb">
-      <p class="my-0 py-3 py-sm-4 text-gray">
-        {% assign lang_url = '/' | append: page.lang | append: '/' %}
-        {% assign lang_index = site.pages | where: "url", lang_url %}
-        {% if page.lang != 'en' and lang_index.size > 0 %}
-        <a href="{{ lang_url }}" class="text-gray">{{ site.title }}</a>
-        {% elsif page.lang != 'en' %}
-        <a href="{{ '/' | relative_url }}" class="text-gray">{{ site.title }}</a>
-        {% else %}
-        <a href="/" class="text-gray">{{ site.title }}</a>
-        {% endif %}
-      </p>
-    </div>
-    {% endif %}
   </div>
 </nav>

_layouts/article.html

@@ -11,14 +11,14 @@ <h1 class="h0-mktg lh-condensed text-center mb-3">{{ page.title }}</h1>
     <p class="lead text-center text-gray col-md-8 mx-auto mb-4 position-relative">{{ page.description }}</p>
     <nav class="toc mb-4 mb-md-6">
       <div class="Box col-sm-8 col-md-4 col-lg-3 mx-auto">
-        <a class="toc-trigger d-block text-center p-3">
+        <button type="button" class="toc-trigger d-block text-center p-3" aria-expanded="false" aria-controls="toc-list">
           <span class="text-black">{{ t.article.table_of_contents }}</span><svg height="18"
             class="octicon octicon-triangle-down ml-2 fill-blue v-align-middle icon-flip" viewBox="0 0 12 16"
-            version="1.1" width="13" role="img">
+            version="1.1" width="13" aria-hidden="true" focusable="false">
             <path fill-rule="evenodd" d="M0 5l6 6 6-6z"></path>
           </svg>
-        </a>
-        {% include jekyll-toc.html html=content h_max=2 ordered=true class="toc-list list-style-none"
+        </button>
+        {% include jekyll-toc.html html=content h_max=2 ordered=true id="toc-list" class="toc-list list-style-none"
         item_class="border-top" anchor_class="d-block py-3 px-3" %}
       </div>
     </nav>

assets/css/toc.scss

@@ -8,6 +8,12 @@
 }
 
 .toc-trigger {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: inherit;
+
   &:hover {
     text-decoration: none;
     cursor: pointer;

assets/js/toc.js

@@ -1,7 +1,7 @@
 $(function() {
     $(document).click(function() {
       // Hiding ToC
-      $('.toc-trigger').removeClass('toc-open');
+      $('.toc-trigger').removeClass('toc-open').attr('aria-expanded', 'false');
       $('.toc-list').removeClass('is-shown');
     });
 
@@ -10,7 +10,8 @@ $(function() {
         // Prevent bubbling event for proper hiding
         e.stopPropagation();
         // Calling a function in case you want to expand upon this.
-        $(this).toggleClass('toc-open');
+        var $trigger = $(this).toggleClass('toc-open');
+        $trigger.attr('aria-expanded', $trigger.hasClass('toc-open') ? 'true' : 'false');
         $('.toc-list').toggleClass('is-shown');
     });
 });