Fix Max Mega Menu toggle buttons to have a true button adjacent to the link

footer.js

document.addEventListener('DOMContentLoaded', function () {
  const menuItems = document.querySelectorAll('.mega-menu-item-has-children');

  menuItems.forEach((menuItem, index) => {
    const link = menuItem.querySelector('a.mega-menu-link');
    const indicator = link.querySelector('.mega-indicator');

    if (indicator) {
      // Remove the aria-expanded attribute from the link for accessibility compliance
      link.removeAttribute('aria-expanded');

      // Remove the indicator from the link
      link.removeChild(indicator);

      // Get the text content from the link for the aria-label
      const pageName = link.textContent.trim();

      // Get or assign a unique ID to the submenu
      const submenu = menuItem.querySelector('.mega-sub-menu');
      const submenuId = submenu.id || `mega-submenu-${index + 1}`;
      submenu.id = submenuId;

      // Create a new button element
      const toggleButton = document.createElement('button');
      toggleButton.className = 'mega-submenu-toggle';
      toggleButton.setAttribute('aria-expanded', 'false');
      toggleButton.setAttribute('aria-label', `${pageName} submenu`);
      toggleButton.setAttribute('aria-controls', submenuId);

      // Add a visible arrow to the button (▼ for collapsed, ▲ for expanded)
      const arrow = document.createElement('span');
      arrow.className = 'submenu-arrow';
      arrow.textContent = '▼';
      toggleButton.appendChild(arrow);

      // Insert the button after the link
      link.insertAdjacentElement('afterend', toggleButton);

      let isExpanded = false; // Track expanded state

      // Function to update submenu display, opacity, and arrow direction
      const updateSubmenu = () => {
        toggleButton.setAttribute('aria-expanded', String(isExpanded));

        if (isExpanded) {
          submenu.style.display = 'block';
          submenu.style.opacity = '1';
          menuItem.classList.add('mega-toggle-on'); // Add class when expanded
        } else {
          submenu.style.display = 'none';
          submenu.style.opacity = '0';
          menuItem.classList.remove('mega-toggle-on'); // Remove class when collapsed
        }

        submenu.style.transition = 'opacity 0.3s ease'; // Smooth transition for opacity change
        arrow.textContent = isExpanded ? '▲' : '▼';
      };

      // Toggle submenu visibility
      const toggleSubmenu = () => {
        isExpanded = !isExpanded;
        updateSubmenu();
      };

      // Click event to toggle submenu visibility
      toggleButton.addEventListener('click', toggleSubmenu);

      // Keyboard accessibility: Expand/collapse submenu with Enter or Space keys
      toggleButton.addEventListener('keydown', (event) => {
        if (['Enter', ' '].includes(event.key)) {
          event.preventDefault();
          toggleSubmenu();
        }
      });

      // Close submenu when pressing Escape
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && isExpanded) {
          isExpanded = false;
          updateSubmenu();
          toggleButton.focus(); // Return focus to the toggle button
        }
      });

      // Make submenu visible on hover
      menuItem.addEventListener('mouseenter', () => {
        submenu.style.display = 'block';
        submenu.style.opacity = '1'; // Set opacity to 1 on hover
      });

      // Prevent submenu from collapsing when the mouse moves away after being expanded by a click
      menuItem.addEventListener('mouseleave', () => {
        if (!isExpanded) {
          submenu.style.display = 'none';
          submenu.style.opacity = '0'; // Set opacity to 0 when not expanded
        }
      });

      submenu.addEventListener('mouseleave', () => {
        if (!isExpanded) {
          submenu.style.display = 'none';
          submenu.style.opacity = '0'; // Set opacity to 0 when not expanded
        }
      });

      // Initialize submenu to be hidden by default
      submenu.style.display = 'none';
      submenu.style.opacity = '0'; // Set initial opacity to 0
    }
  });
});