Kendo window tab order and section 508

[Trent Jones]

If I have a kendo window open (modal) and tab through all the available controls in the window the tab button next goes to the browser URL bar.  Upon the next tab after the browser URL bar the tab order goes behind the kendo window to the main navigation of the site.  Since the kendo window is 'blocking' the UI, shouldn't the tab order come back to the kendow modal window next instead?  I see this as a bug and so does my QA team.

Thanks,
Trent

[Dimo]

Hello Trent,

Here is the copy-pasted text from the corresponding support ticket of yours. Please avoid posting duplicate tickets and forum threads, as this can lead to overhead in our support staff. Thank you.


Indeed, the desired behavior of confining the tabbing order within the Window only is currently not supported. One option to prevent focus outside the modal Window is to intercept the keydown event globally, check whether the pressed key is [Tab], check the location of the newly focused element and move the focus back to the Window if needed. However, we consider this approach a little too obtrusive to be provided out-of-the-box, and moreover, it might lead to undesired side effects. You can vote for this feature on Kendo UserVoice.

function onActivate(e) {
    var windowElement = this.wrapper,
        windowContent = this.element;

    $(document).on("keydown.kendoWindow", function(e) {
        var focusedElement = $(document.activeElement);
        if (e.keyCode == kendo.keys.TAB && focusedElement.closest(windowElement).length == 0) {
            windowContent.focus();
        }
    });
}

Instead of focusing the Window itself, you can focus a specific element in the code above.

function onClose(e) {
    $(document).off("keydown.kendoWindow");
}

$("#win").kendoWindow({
    close: onClose,
    activate: onActivate
});

Regards,
Dimo
Telerik

[Trent Jones]

Thanks so much for the reply, sorry for the duplicate post but  was hoping others had a solution.  Now that you have provided a solution, perhaps an option to use it would be nice in the product.  I will give it a try and see if it is what we desire.

Another odd anomoly we are facing with the window.  We actually want focus to a particular control when the window opens.  I've added all the code and it works the majority of the time, but sometimes the focus jumps from my control back to the kendoWindow.  I haven't been able to resolve when or why.  Also, i believe i tried adding my code to the activate event.... I also tried adding my focus using _.defer(function(){});  

Anything in your code that is focusing it, does the focus happen before or after the activate?

Thanks again,
Trent

[Dimo]

Hello Trent,

The Kendo UI Window takes thе focus when opened and this is by design. It ensures that the widget's keyboard navigation is ready to use. If you want to focus a particular element inside the Window, please use the activate event. This should work and no setTimeout would be needed, although if focusing does not work reliably in your particular scenario, you can wrap the focus() statement in setTimeout and you should be fine.

Regards,
Dimo
Telerik

[Rali]

I did a bit of work to extend the code example, so that it would cover a more complex scenario. My code utilizes the tabindex attribute and different values are used to control the tab order. So the code did not quite work for me to get the tabbing order within the window right. Here's what I did. So far it does the job, better ideas or framework fix would be most welcome.

$(document).unbind("keyup.kendoWindow").bind("keyup.kendoWindow", function (e) {
    var focusedElement = $(document.activeElement),
        tabindex = parseInt(focusedElement.attr('tabindex'));
    if (e.keyCode == kendo.keys.TAB && focusedElement.closest(this).length == 0) {
        // get all focusable visible elements in window
        var focusable = this
            .find(':focusable:visible[tabindex!=-1]');

        // get their tabindices and sort them
        var tabindices = focusable
            .map(function () { return this.tabIndex; })
            .get()
            .getUnique()
            .sort(function (a, b) { return a - b; });

        var indicesLength = tabindices.length,
            indexPosition = tabindices.indexOf(tabindex);

        // if the focus escapes to an element with a tabindex that is not present in the window
        // take the next greater tabindex, or the first, if a greater is not present
        if (indexPosition < 0) {
            for (var i = 0; i < indicesLength; i++) {
                if (tabindices[i] > tabindex) {
                    indexPosition = i;
                    break;
                }
            }

            if (indexPosition < 0) {
                indexPosition = 0;
            }
        }

        // return the excaped focus to the corresponding element
        var elements = [];
        if (e.shiftKey) {
            if (indexPosition > 0) {
                elements = $.grep(focusable, function(el){ return el.tabIndex == tabindices[indexPosition - 1]});
                $(elements[elements.length - 1]).focus();
            }
            else {
                elements = $.grep(focusable, function (el) { return el.tabIndex == tabindices[indicesLength - 1] });
                $(elements[elements.length - 1]).focus();
            }
        }
        else {
            if (tabindex != 0 && indexPosition < indicesLength) {
                elements = $.grep(focusable, function (el) { return el.tabIndex == tabindices[indexPosition] });
                $(elements[0]).focus();
            }
            else {
                elements = $.grep(focusable, function (el) { return el.tabIndex == tabindices[0] });
                $(elements[0]).focus();
            }
        }
    }
}.bind(this.wrapper));

[Dimo]

Hi Rali,

Thanks for your contribution.

Regards,
Dimo
Telerik by Progress