Kendo window tab order and section 508

6 posts, 0 answers
  1. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 06 Jun 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 07 Jun 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 07 Jun 2013 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Jun 2013 Link to this post

    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!
  6. Rali
    Rali avatar
    3 posts
    Member since:
    Jan 2010

    Posted 11 Jul Link to this post

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

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Jul Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready