Scroll TabStrip with Keyboard

Keyboard navigation requires an element to be focused. Non-form elements normally do not receive focus. To overcome this, the TabStrip <div> wrapper has a tabindex attribute. Logically, Left Arrow and Right Arrow keys switch the active tab. Up Arrow and Down Arrow keys do the same as this is what accessibility standards require. When the TabStrip wrapper has the focus, and its active content container is scrollable, then the Up Arrow and Down Arrow keys do not scroll the container even if the widget ignores these keystrokes. This is because the focused element is a parent of the scrollable one and the browser has no idea that it is supposed to scroll the child element in this situation.

There is a way to make the scrollable content container become focused: add a tabindex attribute to it. Then, scrolling with the Up Arrow and Down Arrow keys start working, but TabStrip keyboard navigation completely stops working. This is because Kendo UI TabStrip handles key events only if its wrapper is the focused element. The idea behind this behavior is that the widget is not supposed to interfere with the keyboard navigation of nested form elements, child widgets, etc.

To vertically scroll the TabStrip content containers with the help of the keyboard, do the following:

Step 1. Drop the keyboard navigation of the TabStrip altogether by removing the wrapper's tabindex after widget initialization. In this way the TabStrip is not able to receive focus and capture keyboard events.

    $("#tabstrip").kendoTabStrip();
    $("#tabstrip").removeAttr("tabindex");

Step 2. Scroll the container using JavaScript, as the example below demonstrates.

Example

    <style>

        #tabstrip > .k-content
        {
            height: 200px;
            overflow: auto;
        }

    </style>

    <div id="tabstrip">
        <ul>
            <li class="k-state-active">
                One
            </li>
            <li>
                Two
            </li>
        </ul>
        <div>
            1<br /><br /><br />2<br /><br /><br />3<br /><br /><br />4<br /><br /><br />
            5<br /><br /><br />6<br /><br /><br />7<br /><br /><br />8<br /><br /><br />
        </div>
        <div>
            1<br /><br /><br />2<br /><br /><br />3<br /><br /><br />4<br /><br /><br />
            5<br /><br /><br />6<br /><br /><br />7<br /><br /><br />8<br /><br /><br />
        </div>
    </div>

    <script>
        $(document).ready(function () {
            // this handler should be attached before the TabStrip is initialized!
            $("#tabstrip").on("keydown", function (e) {
                // kendo.keys is documented at http://docs.telerik.com/kendo-ui/api/javascript/kendo#fields-keys
                if (e.keyCode == kendo.keys.DOWN || e.keyCode == kendo.keys.UP) {
                    // prevent the built-in TabStrip keyboard navigation
                    e.stopImmediatePropagation();
                    // prevent page scroll
                    e.preventDefault();
                    // get the visible TabStrip container
                    var visibleContainer = $(e.target).data("kendoTabStrip").wrapper.children(".k-content").filter(":visible");
                    if (e.keyCode == kendo.keys.DOWN) {
                        visibleContainer.scrollTop(visibleContainer.scrollTop() + 50);
                    } else {
                        visibleContainer.scrollTop(visibleContainer.scrollTop() - 50);
                    }
                }
            });

            $("#tabstrip").kendoTabStrip({
                animation: {
                    open: {
                        // the default expand animation should be replaced or disabled
                        // when the TabStrip containers have an explicit height
                        effects: "fadeIn"
                    }
                }
            });

            $("#tabstrip").focus();

        });
    </script>

See Also

Other articles on the Kendo UI TabStrip:

• TabStrip JavaScript API Reference
• How to Display Buttons at the Bottom
• How to Expand to 100% Height and Auto-Resize
• How to Save Content Scroll Position

For more runnable examples on the Kendo UI TabStrip widget, browse its How To documentation folder.