Accessible Dropdown Menu Pattern

<!-- Dropdown menu container -->
<div class="dropdown">

  <!-- Trigger button: aria-haspopup tells screen readers
       a menu will appear. aria-expanded communicates
       the current open/closed state. -->
  <button type="button"
          aria-expanded="false"
          aria-haspopup="true"
          aria-controls="settings-menu"
          id="menu-trigger">
    Settings
  </button>

  <!-- Menu: role="menu" identifies this as a menu widget.
       li wrappers use role="none" to neutralize list
       semantics that would interfere with the menu role.
       Each interactive item uses role="menuitem". -->
  <ul role="menu"
      id="settings-menu"
      aria-labelledby="menu-trigger"
      hidden>
    <li role="none">
      <button role="menuitem" tabindex="-1">
        Profile
      </button>
    </li>
    <li role="none">
      <button role="menuitem" tabindex="-1">
        Preferences
      </button>
    </li>
    <li role="none">
      <button role="menuitem" tabindex="-1">
        Notifications
      </button>
    </li>
    <li role="none">
      <button role="menuitem" tabindex="-1">
        Help
      </button>
    </li>
    <!-- Separator before destructive action -->
    <li role="none" class="menu-separator">
      <button role="menuitem" tabindex="-1">
        Sign Out
      </button>
    </li>
  </ul>

</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown button[aria-haspopup] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 0.375rem;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  /* SC 2.5.8: minimum 24x24 target */
  min-height: 2.75rem;
}

.dropdown button[aria-haspopup]:hover {
  border-color: #5b2a86;
}

/* SC 2.4.13: focus indicator with 3:1 contrast */
.dropdown button[aria-haspopup]:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: 2px;
}

[role="menu"] {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

[role="menu"][hidden] {
  display: none;
}

[role="menuitem"] {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  /* SC 2.5.8: minimum target size */
  min-height: 2.25rem;
}

[role="menuitem"]:hover {
  background: #f3f4f6;
}

/* SC 2.4.13: visible focus on menu items */
[role="menuitem"]:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: -2px;
  border-radius: 0.25rem;
}

/* Visual separator between groups */
.menu-separator {
  border-top: 1px solid #d1d5db;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dropdown button[aria-haspopup],
  [role="menuitem"] {
    transition: none;
  }
}

function initDropdownMenu(container) {
  const trigger = container.querySelector(
    '[aria-haspopup="true"]'
  );
  const menu = container.querySelector('[role="menu"]');
  const items = menu.querySelectorAll('[role="menuitem"]');

  function openMenu() {
    menu.hidden = false;
    trigger.setAttribute('aria-expanded', 'true');
    // Focus the first menu item on open
    items[0].focus();
  }

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

  function focusItem(index) {
    items[index].focus();
  }

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

  // Open menu on Arrow Down from trigger
  trigger.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      openMenu();
    }
  });

  // Keyboard navigation within the menu
  menu.addEventListener('keydown', (e) => {
    const currentIndex = Array.from(items).indexOf(
      document.activeElement
    );

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        // Next item, wrap to first
        focusItem((currentIndex + 1) % items.length);
        break;

      case 'ArrowUp':
        e.preventDefault();
        // Previous item, wrap to last
        focusItem(
          (currentIndex - 1 + items.length)
            % items.length
        );
        break;

      case 'Home':
        e.preventDefault();
        focusItem(0);
        break;

      case 'End':
        e.preventDefault();
        focusItem(items.length - 1);
        break;

      case 'Escape':
        closeMenu(); // Returns focus to trigger
        break;

      case 'Tab':
        // Close menu, let focus move naturally
        closeMenu(false);
        break;
    }
  });

  // Activate menu item on click
  items.forEach(item => {
    item.addEventListener('click', () => {
      // Handle the action here
      closeMenu();
    });
  });

  // Close menu when clicking outside
  document.addEventListener('click', (e) => {
    if (!container.contains(e.target)) {
      closeMenu(false);
    }
  });
}

// Initialize all dropdown menus on the page
document.querySelectorAll('.dropdown')
  .forEach(initDropdownMenu);