resolves #47 add aria- attributes to mobile menu button; replace data-target with aria-controls (PR #133)

Author: mojavelinux

src/js/05-mobile-navbar.js

@@ -8,7 +8,7 @@
   function toggleNavbarMenu (e) {
     e.stopPropagation() // trap event
     var html = document.documentElement
-    var menu = document.getElementById(this.dataset.target)
+    var menu = document.getElementById(this.getAttribute('aria-controls') || this.dataset.target)
     if (!menu.classList.contains('is-active') && /mobi/i.test(window.navigator.userAgent)) {
       if (Math.round(parseFloat(window.getComputedStyle(html).minHeight)) !== window.innerHeight) {
         html.style.setProperty('--vh', window.innerHeight / 100 + 'px')
@@ -17,7 +17,7 @@
       }
     }
     html.classList.toggle('is-clipped--navbar')
-    this.classList.toggle('is-active')
+    navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active'))
     menu.classList.toggle('is-active')
   }
 })()

src/partials/header-content.hbs

@@ -3,7 +3,7 @@
     <div class="navbar-brand">
       <a class="navbar-item logo" title="Asciidoctor" href="https://asciidoctor.org"><img src="{{{uiRootPath}}}/img/asciidoctor-logo.svg" alt="Asciidoctor" width="48"></a>
       <a class="navbar-item title" href="{{#with (and site.url site.homeUrl)}}{{{@root.site.url}}}{{{this}}}{{else}}{{{siteRootPath}}}{{/with}}">{{site.title}}</a>
-      <button class="navbar-burger" data-target="topbar-nav">
+      <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
         <span></span>
         <span></span>
         <span></span>