From 9bbdd681f7cbf4c3f83ce083b3ce0d9254d43530 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 9 Jun 2026 04:29:29 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20navigation?=
 =?UTF-8?q?=20accessibility=20in=20MainHeader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change improves the accessibility and intuition of the navigation header:
- Added `aria-current="location"` to active section links in both desktop and mobile views.
- Implemented dynamic `aria-label` for the mobile menu toggle button ("Open menu" / "Close menu") based on its open state.
- Enhanced focus-visible styles and added hover transitions to the mobile toggle for better visual feedback.

These micro-UX improvements ensure that screen reader users can identify the current section and the state of the mobile menu, while providing a more polished interaction for all users.
---
 src/components/header.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 63c4a1e..a95036e 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -92,10 +92,10 @@ export const MainHeader = () => {
         <div className="sm:hidden">
           <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
-            aria-label="Toggle menu"
+            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
             aria-expanded={isMenuOpen}
             aria-controls="mobile-menu"
-            className="p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md"
+            className="p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md text-slate-500 hover:text-primary transition-colors"
           >
             <svg
               className="h-6 w-6"
@@ -133,6 +133,11 @@ export const MainHeader = () => {
                 }`}
                 href={section.link}
                 onClick={(e) => handleScroll(e, section.link)}
+                aria-current={
+                  activeSection === section.link.substring(1)
+                    ? "location"
+                    : undefined
+                }
               >
                 {section.name}
               </a>
@@ -157,6 +162,11 @@ export const MainHeader = () => {
                   }`}
                   href={section.link}
                   onClick={(e) => handleScroll(e, section.link)}
+                  aria-current={
+                    activeSection === section.link.substring(1)
+                      ? "location"
+                      : undefined
+                  }
                 >
                   {section.name}
                 </a>