Estoy ampliando mi navegación existente para la accesibilidad, pero tengo problemas al presionar "Enter" en el teclado mientras el objetivo está enfocado. Los detectores de eventos para la búsqueda y/o la navegación se activan cuando se enfoca cualquier otro elemento, esto podría ser cualquier ancla o cualquier elemento enfocado.
Hacer clic con el mouse en los elementos individuales (y hacer clic fuera del formulario) funciona de la manera que necesita. Sin embargo, al enfocar y ENTONCES presionar "Enter" en cualquier parte de la página, se disparan, si no el correcto, ambos eventos. Cualquier ayuda sería apreciada.
/* Search */ let searchToggle = document.querySelector('.search-toggle'), searchForm = document.querySelector('.search-form'); function searchClick(event) { event.stopPropagation(); let toggled = searchToggle.contains(event.target); if (toggled) { searchForm.classList.add('show-search-form'); } else if (!event.target.closest('.show-search-form')) { searchForm.classList.remove('show-search-form'); } } function searchFocus(event) { if (event.keyCode === 13) { event.stopPropagation(); searchToggle.click(); } } document.addEventListener('click', searchClick, false); document.addEventListener('keyup', searchFocus, false); /* Navigation */ let navToggle = document.querySelector('.toggle'), nav = document.querySelector('.nav'); navToggle.addEventListener('click', () => { nav.classList.toggle('toggle-menu'); }); function navFocus(event) { if (event.keyCode === 13) { event.stopPropagation(); navToggle.click(); } } document.addEventListener('keyup', navFocus, false); *:focus-visible { outline: 5px solid #333333; } .search-form, .nav { display: none; } .search-form.show-search-form { display: block; } .nav.toggle-menu { display: block; } <div class="search-toggle" tabindex="0"> <span>Toggle Search</span> </div> <div class="search-form"> <span>Test Form</span> </div> <div class="toggle" tabindex="0"> <span>Toggle Menu</span> </div> <nav class="nav"> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </nav>