Menu Accessibility

Hi,

I’m working on trying to make the default menu more accessible. For instance I’m working on adding a button for the submenu, so users are not forced to tab through the submenus to reach the next top menu item and can bypass the submenus completely if desired. However, I’m struggling to get this to work. If you tab through the menus at https://webdevelopmenta.com/shop/ you’ll see the dropdown button opens automatically. Is there a way to fix this?

Here is the custom code I used to get what I have so far:

Enqueue Custom JavaScript

function custom_enqueue_accessible_menu_script() {
    wp_enqueue_script(
        'accessible-menu',
        get_stylesheet_directory_uri() . '/js/accessible-menu.js',
        array('jquery'),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'custom_enqueue_accessible_menu_script');

Add Accessible Menu Buttons: Added this PHP code to the functions.php file:

function custom_add_submenu_buttons($item_output, $item, $depth, $args) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $button = '<button class="submenu-toggle" aria-expanded="false">';
        $button .= '<span class="screen-reader-text">Open submenu</span>';
        $button .= '</button>';
        $item_output .= $button;
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'custom_add_submenu_buttons', 10, 4);

Create JavaScript for Interaction

jQuery(document).ready(function($) {
    // Prevent default behavior when submenu button is focused
    $('.submenu-toggle').on('focus', function(event) {
        event.preventDefault(); // Prevent automatic behavior on focus
    });

    // Handle keydown events for the submenu toggle
    $('.submenu-toggle').on('keydown', function(event) {
        // Only respond to Enter (13) or Space (32)
        if (event.key === 'Enter' || event.key === ' ' || event.keyCode === 13 || event.keyCode === 32) {
            event.preventDefault(); // Prevent default key action
            var $button = $(this);
            var $submenu = $button.siblings('.sub-menu');

            // Toggle aria-expanded and submenu visibility
            var isExpanded = $button.attr('aria-expanded') === 'true';
            $button.attr('aria-expanded', !isExpanded);
            if (!isExpanded) {
                $submenu.slideDown();
            } else {
                $submenu.slideUp();
            }
        }
    });

    // Handle mouse click events for the submenu toggle
    $('.submenu-toggle').on('click', function(event) {
        event.preventDefault(); // Prevent default click action
        var $button = $(this);
        var $submenu = $button.siblings('.sub-menu');

        // Toggle aria-expanded and submenu visibility
        var isExpanded = $button.attr('aria-expanded') === 'true';
        $button.attr('aria-expanded', !isExpanded);
        if (!isExpanded) {
            $submenu.slideDown();
        } else {
            $submenu.slideUp();
        }
    });

    // Close all open submenus when the Escape key is pressed
    $(document).on('keydown', function(event) {
        if (event.key === 'Escape' || event.keyCode === 27) {
            $('.submenu-toggle[aria-expanded="true"]').each(function() {
                $(this).attr('aria-expanded', 'false').siblings('.sub-menu').slideUp();
            });
        }
    });
});

CSS styling

.submenu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    font-size: 16px;
}

.submenu-toggle .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.submenu-toggle[aria-expanded="true"]::after {
    content: '▲';
}

.submenu-toggle[aria-expanded="false"]::after {
    content: '▼';
}

Any help or guidance would be appreciated.
Ashley

The page I need help with: [log in to see the link]