Estoy usando guiones bajos con su script de navegación.js para proporcionar una navegación personalizada con submenús. Los submenús funcionan en todos los navegadores que he probado excepto Safari en Mac (funciona con Safari en mi iPad). No hay mensajes en la consola del desarrollador, el submenú simplemente no se expande cuando el elemento principal.

Pero si agrego tabindex="0" al submenú a elemento en el inspector DOM de Safari, puedo persuadirlo para que se muestre cuando vuelva a hacer clic en él. No entiendo por qué esto es relevante para Safari. ¿Necesito agregar tabindex a cada enlace de submenú y lo hago con un andador?

JS relevante:

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