improve menu accessibility

src/components/Hamburger.astro

@@ -1,8 +1,8 @@
 ---
 ---
 
-<div class="hamburger">
+<button aria-expanded="false" aria-controls="main-menu" class="hamburger">
   <span class="line"></span>
   <span class="line"></span>
   <span class="line"></span>
-</div>
+</button>

src/components/Header.astro

@@ -5,7 +5,7 @@ import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <header>
-  <nav>
+  <nav aria-label="Main menu">
     <Hamburger />
     <ThemeIcon />
     <Navigation />

src/components/Navigation.astro

@@ -1,6 +1,6 @@
 ---
 ---
-<div class="nav-links">
+<div id="main-menu" class="nav-links">
   <a href="/">Home</a>
   <a href="/about/">About</a>
   <a href="/blog/">Blog</a>

src/scripts/menu.js

@@ -1,3 +1,6 @@
-document.querySelector('.hamburger').addEventListener('click', () => {
-  document.querySelector('.nav-links').classList.toggle('expanded');
+const hamburger = document.querySelector('.hamburger')
+
+hamburger.addEventListener('click', () => {
+  const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';
+  hamburger.setAttribute('aria-expanded', !isExpanded);
 });

src/styles/global.css

@@ -23,6 +23,9 @@ h1 {
 /* nav styles */
 
 .hamburger {
+  background: transparent;
+  display: block;
+  border: none;
   padding-right: 20px;
   cursor: pointer;
 }
@@ -39,7 +42,6 @@ h1 {
   width: 100%;
   top: 5rem;
   left: 48px;
-  background-color: #ff9776;
   display: none;
   margin: 0;
 }
@@ -59,7 +61,7 @@ h1 {
   background-color: #ff9776;
 }
 
-.expanded {
+.hamburger[aria-expanded="true"] ~ .nav-links {
   display: unset;
 }
 
@@ -87,6 +89,11 @@ html.dark {
   color: #fff;
 }
 
+.dark .nav-links a:hover,
+.dark .nav-links a:focus {
+  color: #000;
+}
+
 .dark .nav-links a {
   color: #fff;
-}
+}