Dropdown menu accessibility (arrow keys NOT tab)

Hi,
Thanks for the link to your test site, but the standard login url is not working /wp-admin/ so we can’t examine. Please check.

Best regards,
Mike

Hi,
Thanks, I disabled the function in your child theme and added the javascript to your WPCode plugin and found that the console.log code was causing an error:
console.log(Pressed key: ${e.key});
so I disabled it as it was only for testing.
Now the code works, please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the confusion, I removed the WPCode snippet and enabled the child theme function again.
This is the working solution:

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 );

Best regards,
Mike

Hi,
Yes, sorry for the other errors, but you should not have any issues now. Do you see it woking on your test site?

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike