Accessible Toggle Buttons for Sub-Menus

add_filter( 'walker_nav_menu_start_el', function ( $output, $item, $depth, $args ) {
    $classes = is_array( $item->classes ) ? $item->classes : array();

    if ( ! in_array( 'menu-item-has-children', $classes, true ) ) {
        return $output;
    }

    $label = sprintf( 'Show sub-menu for %s', wp_strip_all_tags( $item->title ) );

    return $output . sprintf(
        '<button type="button" class="wpide-submenu-toggle" aria-expanded="false" aria-label="%s"><span aria-hidden="true">▾</span></button>',
        esc_attr( $label )
    );
}, 10, 4 );

add_action( 'wp_footer', function () {
    ?>
<style>
.wpide-submenu-toggle{background:none;border:0;padding:4px 8px;cursor:pointer;color:inherit;font:inherit;}
.wpide-submenu-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.menu-item-has-children.is-open > .sub-menu{display:block;visibility:visible;opacity:1;left:auto;}
</style>
<script>
document.addEventListener('click', function (event) {
    var button = event.target.closest('.wpide-submenu-toggle');
    if (!button) { return; }
    var item = button.parentElement;
    var open = button.getAttribute('aria-expanded') !== 'true';
    button.setAttribute('aria-expanded', open ? 'true' : 'false');
    item.classList.toggle('is-open', open);
});
</script>
    <?php
} );