This is a migrated thread and some comments may be shown as answers.

Kendo window tab order and section 508

5 Answers 197 Views
Window
This is a migrated thread and some comments may be shown as answers.
Trent Jones
Top achievements
Rank 1
Trent Jones asked on 06 Jun 2013, 12:37 PM
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

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Jun 2013, 01:03 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Trent Jones
Top achievements
Rank 1
answered on 07 Jun 2013, 01:24 PM
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
0
Dimo
Telerik team
answered on 10 Jun 2013, 07:33 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rali
Top achievements
Rank 1
answered on 11 Jul 2016, 07:41 AM

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));

0
Dimo
Telerik team
answered on 11 Jul 2016, 08:06 AM
Hi Rali,

Thanks for your contribution.

Regards,
Dimo
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Window
Asked by
Trent Jones
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Trent Jones
Top achievements
Rank 1
Rali
Top achievements
Rank 1
Share this question
or