fix: aria attribute for mobile menu

layouts/partials/footer.html

@@ -148,6 +148,12 @@
 </footer>
 
 <script>
+	function toggleMenu($target) {
+		$target.classList.toggle('hidden');
+		const expanded = $target.getAttribute('aria-expanded')
+		$target.setAttribute('aria-expanded', expanded === 'false' ? 'true' : 'false')
+	}
+
 	document.addEventListener('DOMContentLoaded', function () {
 		const $navbarBurgers = Array.prototype.slice.call(
 			document.querySelectorAll('.navbar-burger'),
@@ -158,10 +164,10 @@
 				const target = $el.dataset.target;
 				const $target = document.getElementById(target);
 				$el.addEventListener('click', function () {
-					$target.classList.toggle('hidden');
+					toggleMenu($target)
 				});
 				$target.addEventListener('click', (el) => {
-					$target.classList.toggle('hidden');
+					toggleMenu($target)
 				});
 			});
 		}

layouts/partials/navbar.html

@@ -7,11 +7,10 @@
 				class="my-2 ml-2 h-10 lg:ml-0"
 			/>
 		</a>
-		<a
+		<button
 			class="navbar-burger block cursor-pointer p-3 pr-4 text-white lg:hidden"
 			data-target="navMenu"
-			aria-label="menu"
+			aria-label="Open Menu"
-			aria-expanded="false"
 		>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -27,7 +26,7 @@
 					d="M4 6h16M4 12h16M4 18h16"
 				/>
 			</svg>
-		</a>
+		</button>
 		<div class="hidden font-title font-semibold text-white lg:flex">
 			{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
 				<a
@@ -43,7 +42,7 @@
 	</div>
 
 	<!-- Mobile Menu -->
-	<div class="fixed top-0 bottom-0 left-0 right-0 hidden bg-black bg-opacity-50" id="navMenu">
+	<div class="fixed top-0 bottom-0 left-0 right-0 hidden bg-black bg-opacity-50" id="navMenu" aria-expanded="false">
 		<div class="fixed flex h-screen w-3/4 flex-col bg-gray-100 font-title font-semibold">
 			{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
 				<a