Estoy tratando de configurar una función de accesibilidad para este acordeón de arranque. tabindex=0 a cada etiqueta <a> y estoy tratando de asegurarme de que si el usuario presiona la pestaña, se abrirá el menú desplegable / acordeón correspondiente. Pero a partir de ahora, mi código abre todas las opciones de acordeón cuando el usuario presiona el botón de tabulación. ¿Hay alguna manera de hacer un forEach en keydown?
$('.accordion-toggle').keydown(function(e) { if (e.keyCode == 13) { $('.collapse').addClass('show'); } else { $('.collapse').removeClass('show') } }); <a class="text-left w-100 btn btn-link accordion-toggle" tabindex="0" data-toggle="collapse" data-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight"> item 1 <i class="arrow down"></i> </a> <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordion"> <p> Content for this section</p> </div> <a class="text-left w-100 btn btn-link accordion-toggle" tabindex="0" data-toggle="collapse" data-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight"> item 2 <i class="arrow down"></i> </a> <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordion"> <p> Content for this section</p> </div>Debe usar document.activeElement, que solo actuará en el acordeón seleccionado, luego busque el acordeón principal correcto y seleccione el elemento colapsado dentro de él ... y debe ejecutar el teclado en el nivel del documento y verificar si el elemento de enfoque es el elemento de acordeón , la siguiente solución es una mezcla de Javascript puro y jQuery:
$(document).keydown(function(){ let focused = document.activeElement; const pattern = /(?:^|\s)accordion-toggle(?:\s|$)/ if (document.activeElement.className.match(pattern)) { $('.collapse').removeClass('show'); let element = document.activeElement; $(element).closest('.accordion-item').find('.collapse').addClass('show'); } });Demostración: https://jsfiddle.net/k86fj5ex/
No estoy seguro de si esto era lo que buscaba, pero... Si se presiona la tecla de tabulación, entonces:
data-target del control. $(document).keydown(function(e) { //console.log(e.keyCode) if (e.keyCode == 9) { setTimeout(() => { let $focused = $(':focus'); if ($focused.hasClass('accordion-toggle')) { //close all open ones $('.collapsed').removeClass('show'); $($focused.data('target')).addClass('show') } }, 50) } }); .collapsed { display: none; } .collapsed.show { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="text-left w-100 btn btn-link accordion-toggle" tabindex="0" data-toggle="collapse" data-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight"> item 1 <i class="arrow down"></i> </a> <div id='collapseEight' class='collapsed'>Text from collapseEight</div> <a class="text-left w-100 btn btn-link accordion-toggle" tabindex="0" data-toggle="collapse" data-target="#collapseNine" aria-expanded="true" aria-controls="collapseNine"> item 2 <i class="arrow down"></i> </a> <div id='collapseNine' class='collapsed'>Text from collapseNine</div>