I'm using Underscores with its navigation.js script to provide custom navigation with sub-menus. The sub-menus work in every browser I've tested except Safari on Mac (it does work with Safari on my iPad). There are no messages in developer console, the sub-menu simply does not expand when the parent item.

But if I add tabindex="0" to the sub-menu a element in the Safari DOM inspector, I can coax it into showing when click on it again. I don't understand why this is relevant to Safari. Do I need to add tabindex to each sub-menu link, and do I do that with a walker?

relevant JS:

function toggleFocus() {
    if ( event.type === 'focus' || event.type === 'blur' ) {
        let self = this;
        // Move up through the ancestors of the current link until we hit .nav-menu.
        while ( ! self.classList.contains( 'nav-menu' ) ) {
            // On li elements toggle the class .focus.
            if ( 'li' === self.tagName.toLowerCase() ) {
                self.classList.toggle( 'focus' );
            }
            self = self.parentNode;
        }
    }

    if ( event.type === 'touchstart' ) {
        const menuItem = this.parentNode;
        event.preventDefault();
        for ( const link of menuItem.parentNode.children ) {
            if ( menuItem !== link ) {
                link.classList.remove( 'focus' );
            }
        }
        menuItem.classList.toggle( 'focus' );
    }
}