Improve mobile navigation accessibility

src/components/Navigation/Navigation.astro

@@ -58,14 +58,21 @@ 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' />
     </button>
 
     <!-- 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

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', () => {

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/);
+});