From ed0baadc8e1f1b3876aa02bd5d85ad202464773f Mon Sep 17 00:00:00 2001
From: Plattnericus <160856962+Plattnericus@users.noreply.github.com>
Date: Mon, 29 Jun 2026 23:08:43 +0200
Subject: [PATCH] Improve mobile navigation accessibility

---
 src/components/Navigation/Navigation.astro |  7 +++++
 src/components/Navigation/navigation.ts    | 34 ++++++++++++++++++++--
 tests/navigation.spec.ts                   | 29 ++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 tests/navigation.spec.ts

diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index 6ac9f2b8f9ab..79a833b4d569 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -58,6 +58,8 @@ import { UpgradeProButton } from '../TopNavDropdowns/UpgradeProButton';
     <button
       class='block cursor-pointer text-gray-400 hover:text-gray-50 sm:hidden'
       aria-label='Menu'
+      aria-expanded='false'
+      aria-controls='mobile-navigation'
       data-show-mobile-nav
     >
       <Icon icon='hamburger' />
@@ -65,7 +67,12 @@ import { UpgradeProButton } from '../TopNavDropdowns/UpgradeProButton';
 
     <!-- Mobile Navigation Items -->
     <div
+      id='mobile-navigation'
       class='fixed top-0 right-0 bottom-0 left-0 z-40 flex hidden items-center bg-slate-900'
+      aria-hidden='true'
+      aria-label='Main navigation'
+      aria-modal='true'
+      role='dialog'
       data-mobile-nav
     >
       <button
diff --git a/src/components/Navigation/navigation.ts b/src/components/Navigation/navigation.ts
index 2589c4016646..be7afc6bd5e2 100644
--- a/src/components/Navigation/navigation.ts
+++ b/src/components/Navigation/navigation.ts
@@ -1,5 +1,22 @@
 import { logout } from '../../lib/auth';
 
+function setMobileNavState(isOpen: boolean) {
+  const mobileNav = document.querySelector('[data-mobile-nav]');
+  const mobileNavTrigger = document.querySelector('[data-show-mobile-nav]');
+  const closeButton = document.querySelector('[data-close-mobile-nav]');
+
+  mobileNav?.classList.toggle('hidden', !isOpen);
+  mobileNav?.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
+  mobileNavTrigger?.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+  document.body.classList.toggle('overflow-hidden', isOpen);
+
+  if (isOpen) {
+    (closeButton as HTMLButtonElement | null)?.focus();
+  } else {
+    (mobileNavTrigger as HTMLButtonElement | null)?.focus();
+  }
+}
+
 function bindEvents() {
   document.addEventListener('click', (e) => {
     const target = e.target as HTMLElement;
@@ -15,9 +32,9 @@ function bindEvents() {
       e.preventDefault();
       logout();
     } else if (dataset.showMobileNav !== undefined) {
-      document.querySelector('[data-mobile-nav]')?.classList.remove('hidden');
+      setMobileNavState(true);
     } else if (dataset.closeMobileNav !== undefined) {
-      document.querySelector('[data-mobile-nav]')?.classList.add('hidden');
+      setMobileNavState(false);
     } else if (
       accountDropdown &&
       !target?.closest('[data-account-dropdown]') &&
@@ -36,6 +53,19 @@ function bindEvents() {
         ?.classList.toggle('hidden');
     });
 
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') {
+      return;
+    }
+
+    const mobileNav = document.querySelector('[data-mobile-nav]');
+    if (!mobileNav || mobileNav.classList.contains('hidden')) {
+      return;
+    }
+
+    setMobileNavState(false);
+  });
+
   document
     .querySelector('[data-command-menu]')
     ?.addEventListener('click', () => {
diff --git a/tests/navigation.spec.ts b/tests/navigation.spec.ts
new file mode 100644
index 000000000000..1acd9506a07e
--- /dev/null
+++ b/tests/navigation.spec.ts
@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test('mobile navigation manages expanded state and closes with escape', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto('/');
+
+  const menuButton = page.getByRole('button', { name: 'Menu' });
+  const mobileNav = page.locator('#mobile-navigation');
+  const closeButton = page.getByRole('button', { name: 'Close Menu' });
+
+  await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
+  await expect(mobileNav).toHaveAttribute('aria-hidden', 'true');
+
+  await menuButton.click();
+
+  await expect(menuButton).toHaveAttribute('aria-expanded', 'true');
+  await expect(mobileNav).toHaveAttribute('aria-hidden', 'false');
+  await expect(closeButton).toBeFocused();
+  await expect(page.locator('body')).toHaveClass(/overflow-hidden/);
+
+  await page.keyboard.press('Escape');
+
+  await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
+  await expect(mobileNav).toHaveAttribute('aria-hidden', 'true');
+  await expect(menuButton).toBeFocused();
+  await expect(page.locator('body')).not.toHaveClass(/overflow-hidden/);
+});