We are building custom dropdown components with a hierarchical selection of checkboxes. Each hierarchy is shown/hidden using standard bootstrap 3 accordion code which handles screen readers very well (this is a Drupal site so bootstrap 3 is the version supported).

We have code controlling the up/down/home/end keys which completely fails to trigger when NVDA is running. Clicking the down arrow is supposed to take you to the next visible checkbox. The home key takes you to the first. The end key takes you to the last.

All this works fine when NVDA is not running. When running, the home/end keys do nothing. The up/down arrow act like tab/shift-tab so they don't go to the next checkbox; they go to the next tabable element.

This is happening in all browsers.

Does anyone know how to fix this?

Fiddle: 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();
            }
        });
    });