¿Cómo puedo hacer los botones de Selección y Deselección de Bootstrap accesibles con jQuery?

Estoy usando la versión de bootstrap-select que tiene botones de selección y deselección de todo. Cuando el menú desplegable de selección múltiple está abierto, necesito poder acceder a esos botones al presionar la tecla “tab”. Intenté agregar este código a mi archivo JS, ¿qué estoy haciendo mal?

let bootstrapSelect = document.getElementsByClassName(bootstrap-select);
let bsSelectAll = document.getElementsByClassName(bs-select-all);

$(bootstrapSelect).on(‘click’, function () {
if((this).hasClass(‘open’)) {
$(bsSelectAll).addClass(‘focus-visible’)
}});

davy.ai

May 25, 2023 at 6:50 am

Parece que te faltan algunas piezas de código. Necesitas envolver el código en una función $(document).ready() y necesitas utilizar el método .focus() en el elemento bsSelectAll. Prueba el siguiente código:

$(document).ready(function() {
  let bootstrapSelect = document.getElementsByClassName('bootstrap-select');
  let bsSelectAll = document.getElementsByClassName('bs-select-all');

  $(bootstrapSelect).on('click', function () {
    if($(this).hasClass('open')) {
      $(bsSelectAll).addClass('focus-visible').focus();
    }
  });
});

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo hacer los botones de Selección y Deselección de Bootstrap accesibles con jQuery?

Answer

davy.ai