Keyboard accessible navigation and page scrolling

OK, all – I have sorted this issue independently, and here is the solution. Put this code into your functions.php or use it as a PHP code snippet.

//Navigation-fix

function tab_though_menu_skipping_sub_menu_items_unless_down_or_up_arrow_keys_are_used() { ?>
 <script>
document.addEventListener('DOMContentLoaded', function () {
   const menuItems = document.querySelectorAll('.menu-item-has-children'); // Adjust this selector to match your menu structure

   // Initially set tabIndex to -1 for all sub-menu items to skip them in tab navigation
   menuItems.forEach(item => {
       let subMenuItems = item.querySelectorAll('.sub-menu a'); // Adjust this selector for your sub-menus
       subMenuItems.forEach(subMenuItem => {
           subMenuItem.tabIndex = -1;
       });

       item.addEventListener('keydown', function (e) {
           // Only proceed if the event target is a menu item that contains a sub-menu
           let subMenu;
           if (e.target.classList.contains('menu-item-has-children')) {
               subMenu = e.target.querySelector('.sub-menu'); // Adjust this selector for your sub-menus
           } else {
               // This ensures we get the sub-menu even if a child of the menu item was focused
               subMenu = e.target.closest('.menu-item-has-children').querySelector('.sub-menu');
           }

           let subMenuItems = subMenu.querySelectorAll('a'); // Assumes sub-menu items are anchor tags
           let focusedElement = document.activeElement;
           let currentIndex = Array.from(subMenuItems).indexOf(focusedElement);

           switch(e.key) {
               case 'ArrowDown':
                   // Move focus to the next sub-menu item
                   if (currentIndex < subMenuItems.length - 1) {
                       subMenuItems[currentIndex + 1].tabIndex = 0;
                       subMenuItems[currentIndex + 1].focus();
                       e.preventDefault(); // Prevent scrolling the page
                   } else {
                       // Optionally wrap around to the first item
                       subMenuItems[0].tabIndex = 0;
                       subMenuItems[0].focus();
                       e.preventDefault(); // Prevent scrolling the page
                   }
                   break;
               case 'ArrowUp':
                   // Move focus to the previous sub-menu item
                   if (currentIndex > 0) {
                       subMenuItems[currentIndex - 1].tabIndex = 0;
                       subMenuItems[currentIndex - 1].focus();
                       e.preventDefault(); // Prevent scrolling the page
                   } else {
                       // Optionally wrap around to the last item
                       subMenuItems[subMenuItems.length - 1].tabIndex = 0;
                       subMenuItems[subMenuItems.length - 1].focus();
                       e.preventDefault(); // Prevent scrolling the page
                   }
                   break;
           }

           // Reset tabIndex to -1 for items not focused to ensure they're skipped during tab navigation
           subMenuItems.forEach(subMenuItem => {
               if (subMenuItem !== document.activeElement) {
                   subMenuItem.tabIndex = -1;
               }
           });
       });
   });
});
</script>
 <?php
}
add_action( 'wp_footer', 'tab_though_menu_skipping_sub_menu_items_unless_down_or_up_arrow_keys_are_used', 99 );

BTW you’ll also need this to change the aria-expanded attributes on activation –

document.addEventListener("DOMContentLoaded", function() {
    var menuItem = document.querySelector(".menu-item-has-children");
    var subMenu = menuItem.querySelector(".sub-menu");
    var hasMouseEnter = false;
    var clickedAfterMouseEnter = false;

    menuItem.addEventListener("mouseenter", function() {
        this.setAttribute("aria-expanded", "true");
        hasMouseEnter = true;
    });

    menuItem.addEventListener("mouseleave", function() {
        if (!clickedAfterMouseEnter && hasMouseEnter) {
            this.setAttribute("aria-expanded", "false");
        }
        clickedAfterMouseEnter = false; // Reset the flag
    });

    menuItem.addEventListener("focusin", function() {
        this.setAttribute("aria-expanded", "true");
        hasMouseEnter = true;
    });

    subMenu.addEventListener("transitionend", function(event) {
        if (event.propertyName === "max-height" && !subMenu.classList.contains("expanded")) {
            menuItem.setAttribute("aria-expanded", "false");
            hasMouseEnter = false;
        }
    });

    menuItem.addEventListener("click", function(event) {
        if (!subMenu.classList.contains("expanded")) {
            this.setAttribute("aria-expanded", "true");
        } else {
            this.setAttribute("aria-expanded", "false");
        }
        clickedAfterMouseEnter = hasMouseEnter;
        event.preventDefault(); // Prevent default behavior of click event
        event.stopPropagation(); // Stop propagation to prevent the mouseleave event
    });

    menuItem.addEventListener("focusout", function() {
        this.setAttribute("aria-expanded", "false");
    });
});