Make table of content an accessible expandable button

Author: mlama007

_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');
     });
 });