Accessible Mega Menu Pattern

<!-- Mega menu navigation -->
<nav class="mega-menu" aria-label="Main navigation">
  <ul class="mega-menu__bar">

    <!-- Each top-level item is a disclosure:
         button + hidden panel. No role="menu" needed
         because the panel contains navigation links,
         not action items. -->
    <li class="mega-menu__item">
      <button type="button"
              aria-expanded="false"
              aria-haspopup="true"
              aria-controls="panel-products"
              id="trigger-products">
        Products
      </button>

      <!-- Panel: multi-column layout with grouped links.
           Headings and lists provide structure for
           screen reader navigation. -->
      <div class="mega-menu__panel"
           id="panel-products"
           hidden>
        <div class="mega-menu__columns">
          <div class="mega-menu__group">
            <h3>Software</h3>
            <ul>
              <li><a href="/products/analytics">
                Analytics Platform
              </a></li>
              <li><a href="/products/design">
                Design Tools
              </a></li>
              <li><a href="/products/api">
                Developer API
              </a></li>
            </ul>
          </div>
          <div class="mega-menu__group">
            <h3>Hardware</h3>
            <ul>
              <li><a href="/products/keyboards">
                Keyboards
              </a></li>
              <li><a href="/products/displays">
                Displays
              </a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>

    <!-- Repeat for each top-level item -->
    <li class="mega-menu__item">
      <button type="button"
              aria-expanded="false"
              aria-haspopup="true"
              aria-controls="panel-resources"
              id="trigger-resources">
        Resources
      </button>
      <div class="mega-menu__panel"
           id="panel-resources"
           hidden>
        <!-- columns and groups ... -->
      </div>
    </li>

  </ul>
</nav>

.mega-menu__bar {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__item {
  position: relative;
}

.mega-menu__item button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  /* SC 2.5.8: minimum 24x24 target */
  min-height: 2.75rem;
}

.mega-menu__item button:hover {
  background: #f3f4f6;
}

/* SC 2.4.13: visible focus indicator */
.mega-menu__item button:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: -2px;
}

.mega-menu__item button[aria-expanded="true"] {
  background: #f3f4f6;
}

.mega-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 500px;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.mega-menu__panel[hidden] {
  display: none;
}

.mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, minmax(160px, 1fr)
  );
  gap: 1.5rem;
}

.mega-menu__group h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.mega-menu__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__group a {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0.25rem;
  /* SC 2.5.8: minimum target size */
  min-height: 2rem;
}

.mega-menu__group a:hover {
  background: #f3f4f6;
}

.mega-menu__group a:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: -2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mega-menu__item button,
  .mega-menu__group a {
    transition: none;
  }
}

function initMegaMenu(nav) {
  const items = nav.querySelectorAll('.mega-menu__item');

  items.forEach(item => {
    const trigger = item.querySelector('button');
    const panel = item.querySelector('.mega-menu__panel');
    if (!trigger || !panel) return;

    function openPanel() {
      // Close any other open panels first
      closeAllPanels();
      panel.hidden = false;
      trigger.setAttribute('aria-expanded', 'true');
    }

    function closePanel(returnFocus = true) {
      panel.hidden = true;
      trigger.setAttribute('aria-expanded', 'false');
      if (returnFocus) {
        trigger.focus();
      }
    }

    // Toggle panel on click
    trigger.addEventListener('click', () => {
      const isOpen = trigger.getAttribute(
        'aria-expanded'
      ) === 'true';
      if (isOpen) {
        closePanel();
      } else {
        openPanel();
      }
    });

    // Keyboard: Escape closes the panel
    item.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        const isOpen = trigger.getAttribute(
          'aria-expanded'
        ) === 'true';
        if (isOpen) {
          closePanel();
        }
      }
    });

    // Close when focus leaves the menu item
    item.addEventListener('focusout', (e) => {
      // Wait a tick for the new activeElement
      requestAnimationFrame(() => {
        if (!item.contains(document.activeElement)) {
          closePanel(false);
        }
      });
    });
  });

  function closeAllPanels() {
    items.forEach(item => {
      const trigger = item.querySelector('button');
      const panel =
        item.querySelector('.mega-menu__panel');
      if (trigger && panel) {
        panel.hidden = true;
        trigger.setAttribute(
          'aria-expanded', 'false'
        );
      }
    });
  }

  // Close on outside click
  document.addEventListener('click', (e) => {
    if (!nav.contains(e.target)) {
      closeAllPanels();
    }
  });
}

// Initialize
document.querySelectorAll('.mega-menu')
  .forEach(initMegaMenu);