Accessible Responsive Navigation

<nav aria-label="Main navigation">
  <div class="nav-bar">
    <a href="/" class="nav-logo">AcmeCo</a>

    <!-- Desktop links (hidden on mobile via CSS) -->
    <ul class="nav-links">
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>

    <!-- Hamburger button (hidden on desktop via CSS) -->
    <button type="button"
            class="nav-hamburger"
            aria-expanded="false"
            aria-controls="mobile-menu"
            aria-label="Menu">
      <svg aria-hidden="true" viewBox="0 0 24 24"
           fill="none" stroke="currentColor"
           stroke-width="2">
        <line x1="3" y1="6" x2="21" y2="6"/>
        <line x1="3" y1="12" x2="21" y2="12"/>
        <line x1="3" y1="18" x2="21" y2="18"/>
      </svg>
    </button>
  </div>

  <!-- Mobile menu panel -->
  <div id="mobile-menu" class="nav-mobile-panel"
       aria-hidden="true">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</nav>

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
}

.nav-logo {
  font-weight: 700;
  font-size: 1.125rem;
  color: inherit;
  text-decoration: none;
}

/* Desktop links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  padding: 0.5rem 0.75rem;
  color: #4b5563;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.25rem;
  /* SC 2.5.8: adequate target size */
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.nav-links a:hover {
  color: #1f2937;
  background: rgba(0, 0, 0, 0.05);
}

/* SC 2.4.13: visible focus indicator */
.nav-links a:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: 2px;
}

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: 2px solid #d1d5db;
  border-radius: 0.25rem;
  padding: 0.5rem;
  cursor: pointer;
  /* SC 2.5.8: 44x44 minimum target */
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
}

.nav-hamburger svg {
  width: 24px;
  height: 24px;
}

.nav-hamburger:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: 2px;
}

/* Mobile panel — hidden by default */
.nav-mobile-panel {
  display: none;
  border-top: 1px solid #d1d5db;
}

.nav-mobile-panel[aria-hidden="false"] {
  display: block;
  animation: slide-down 0.2s ease-out;
}

.nav-mobile-panel ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.nav-mobile-panel a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  color: #4b5563;
  text-decoration: none;
  font-weight: 500;
  /* SC 2.5.8: adequate target size */
  min-height: 2.75rem;
}

.nav-mobile-panel a:hover {
  color: #1f2937;
  background: rgba(0, 0, 0, 0.05);
}

.nav-mobile-panel a:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: -2px;
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive breakpoint */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: inline-flex;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-panel[aria-hidden="false"] {
    animation: none;
  }
}

function initResponsiveNav(navElement) {
  const hamburger = navElement.querySelector(
    '[aria-controls]'
  );
  const panelId = hamburger.getAttribute('aria-controls');
  const panel = document.getElementById(panelId);
  const menuLinks = panel.querySelectorAll('a');

  function openMenu() {
    hamburger.setAttribute('aria-expanded', 'true');
    panel.setAttribute('aria-hidden', 'false');

    // Focus the first link in the menu
    if (menuLinks.length) {
      menuLinks[0].focus();
    }
  }

  function closeMenu() {
    hamburger.setAttribute('aria-expanded', 'false');
    panel.setAttribute('aria-hidden', 'true');

    // Return focus to the hamburger button
    hamburger.focus();
  }

  function isOpen() {
    return hamburger.getAttribute('aria-expanded')
      === 'true';
  }

  // Toggle on button click
  hamburger.addEventListener('click', () => {
    if (isOpen()) {
      closeMenu();
    } else {
      openMenu();
    }
  });

  // Close on Escape
  navElement.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && isOpen()) {
      closeMenu();
    }
  });

  // Close when Shift+Tab past the first link
  menuLinks[0]?.addEventListener('keydown', (e) => {
    if (e.key === 'Tab' && e.shiftKey && isOpen()) {
      e.preventDefault();
      closeMenu();
    }
  });

  // Close when Tab past the last link
  menuLinks[menuLinks.length - 1]
    ?.addEventListener('keydown', (e) => {
      if (e.key === 'Tab' && !e.shiftKey
          && isOpen()) {
        e.preventDefault();
        closeMenu();
      }
    });

  // Close on click outside
  document.addEventListener('click', (e) => {
    if (isOpen()
        && !navElement.contains(e.target)) {
      closeMenu();
    }
  });
}

// Initialize
document.querySelectorAll('nav[aria-label]')
  .forEach(initResponsiveNav);