JS Navigation not working on Safari on Mac (only)

Question

I'm using Underscores with a slightly modified 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 (with href="#") is clicked.

My JS:

( function() {
const siteNavigation = document.getElementById( 'navigation-outer' ); //changed from 'site-navigation' in default Underscores

// Return early if the navigation doesn't exist.
if ( ! siteNavigation ) {
    return;
}

const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];

// Return early if the button doesn't exist.
if ( 'undefined' === typeof button ) {
    return;
}

const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ];

// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
    button.style.display = 'none';
    return;
}

if ( ! menu.classList.contains( 'nav-menu' ) ) {
    menu.classList.add( 'nav-menu' );
}

// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
button.addEventListener( 'click', function() {
    siteNavigation.classList.toggle( 'toggled' );

    if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
        button.setAttribute( 'aria-expanded', 'false' );
        body.className = body.className.replace( ' noscroll', '' ); // My modification
    } else {
        button.setAttribute( 'aria-expanded', 'true' );
        body.className += ' noscroll'; // My modification
    }
} );

// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
document.addEventListener( 'click', function( event ) {
    const isClickInside = siteNavigation.contains( event.target );

    if ( ! isClickInside ) {
        siteNavigation.classList.remove( 'toggled' );
        button.setAttribute( 'aria-expanded', 'false' );
    }
} );

// Get all the link elements within the menu.
const links = menu.getElementsByTagName( 'a' );

// Get all the link elements with children within the menu.
const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

// Toggle focus each time a menu link is focused or blurred.
for ( const link of links ) {
    link.addEventListener( 'focus', toggleFocus, true );
    link.addEventListener( 'blur', toggleFocus, true );
}

// Toggle focus each time a menu link with children receive a touch event.
for ( const link of linksWithChildren ) {
    link.addEventListener( 'touchstart', toggleFocus, false );
}

/**
 * Sets or removes .focus class on an element.
 */
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' );
    }
}
}() );

My HTML:

<header id="masthead" class="site-header sticky-header">
    <nav id="site-navigation" class="main-navigation">  
        <div id="navigation-outer">
            <button id="menu-toggle" class="hamburger hamburger--emphatic" aria-controls="primary-menu" aria-expanded="false">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
            <div id="navigation-inner">
            
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                ) );
                ?>
            
            </div>
        </div>
    </nav><!-- #site-navigation -->
</header>

Is there something in the JS that is not compatible with Safari specifically?