From 5440bf1f690e99de2293eae5fb85014bb9aaa9a5 Mon Sep 17 00:00:00 2001
From: Dan Allen <dan@opendevise.com>
Date: Tue, 7 Nov 2023 15:23:18 -0700
Subject: [PATCH] resolves #47 add aria- attributes to mobile menu button;
 replace data-target with aria-controls (PR #133)

---
 src/js/05-mobile-navbar.js      | 4 ++--
 src/partials/header-content.hbs | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/js/05-mobile-navbar.js b/src/js/05-mobile-navbar.js
index 0f35ee5b..88475f3d 100644
--- a/src/js/05-mobile-navbar.js
+++ b/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')
   }
 })()
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index 9f7bcb36..8fc47e02 100644
--- a/src/partials/header-content.hbs
+++ b/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>