Estamos creando componentes desplegables personalizados con una selección jerárquica de casillas de verificación. Cada jerarquía se muestra/oculta utilizando el código de acordeón estándar de bootstrap 3 que maneja muy bien los lectores de pantalla (este es un sitio de Drupal, por lo que bootstrap 3 es la versión compatible).

Tenemos un código que controla las teclas arriba/abajo/inicio/fin que no se activa por completo cuando NVDA se está ejecutando. Se supone que hacer clic en la flecha hacia abajo lo llevará a la siguiente casilla de verificación visible. La tecla de inicio te lleva a la primera. La tecla final te lleva a la última.

Todo esto funciona bien cuando NVDA no se está ejecutando. Cuando se ejecuta, las teclas de inicio/fin no hacen nada. Las flechas arriba/abajo actúan como tabulador/shift-tab para que no vayan a la siguiente casilla de verificación; van al siguiente elemento tabulado.

Esto está sucediendo en todos los navegadores.

¿Alguien sabe cómo arreglar esto?

Violín: https://jsfiddle.net/1pya0bm3/1/

 $(document).ready(function(){ $('.region_of_delivery_checkbox').keyup(function(e){ var code = (e.keyCode ? e.keyCode : e.which); var tabables = $(".region_of_delivery_checkbox:visible"); var index = tabables.index(this); console.log(`checkbox and tabables.length = ${tabables.length} and tabables.index(this) is: ${tabables.index(this)}`); if(code == 40) { console.log("40"); tabables.eq(index + 1).focus(); console.log(`tabables.eq(index + 1) is: ${index}`); } else if(code == 38) { console.log("38"); tabables.eq(index - 1).focus(); } else if(code == 35) { console.log("35"); tabables.eq(tabables.length - 1).focus(); } else if(code == 36) { console.log("36"); tabables.eq(0).focus(); } }); });