Using jquery-blockui, also disallow tabbing to blocked elements

Cross-post from GitHub: https://github.com/malsup/blockui/issues/121

Link to plugin: http://malsup.com/jquery/block/

While the elements blocked cannot be clicked, it's still possible to use the tabulator to access them, and then use enter to activate it. Would it be possible to skip the blocked element when tabbing?

For now, we just stop the user from tabbing into the blocked elements, but this stops the user. It'd be better if they could skip the blocked ones.

var proxiedBlock = $.fn.block;
$.fn.block = function () {
    var $elem = proxiedBlock.apply(this, arguments);

    $elem.on('focusin.kj', function (evt) {
        evt.preventDefault();

        $(evt.relatedTarget).focus();
    });

    return $elem;
};

var proxiedUnblock = $.fn.unblock;
$.fn.unblock = function () {
    var $elem = proxiedUnblock.apply(this, arguments);

    $elem.off('focusin.kj');

    return $elem;
};

I had the same problem and discussed with Op here: https://github.com/malsup/blockui/issues/121#issuecomment-129719120 I ended up going with an approach that allows the blocked elements to be skipped. I changed the tabindex HTML attributes of the elements that were blocked. It ended up being the best approach for our app as we didn't have to modify the blockUI code. I used tabindex of "-2" because some of the normal elements I blocked already had a tabindex of -1. For example a date picker with a hidden div. I didn't want to overwrite the tabindex of the already hidden div and possibly confuse 3rd party JS. So I used -2 to distinguish between my calls and the other widgets.

$(this).block();
$(this).find('input,select,a').filter(':not([tabindex=-1])').attr('tabindex',-2);

$(this).unblock();
$(this).find('[tabindex=-2]').removeAttr('tabindex');