Set EnableAriaSupport to True the RadTreeView always jumps to the previous selected node

[Eric]

Hello,

I have a web page which is using RadTreeView. It works well, now we want to support WCAG 2.0 after set EnableAriaSupport = True the RadTreeView doesn't work as before it causes the page scrolls back to the top because the tree jumps to the previous selected node when expand/select nodes at very last of the tree. 

See attached files for details

You also find this issue on the page https://demos.telerik.com/aspnet-ajax/treeview/examples/accessibility/defaultcs.aspx. 

Could you please advise how to keep the tree doesn't jump back to previous selected node

 

Thanks

 

[Peter Milchev]

Hello Eric,

The designed behavior when the ARIA support is enabled is to focus the selected item when toggling the expand state of any item. With that said, if the selected item is not in the view port, the browser automatically scrolls the page so that the focused element(the selected item) is visible on the page.

If not scrolling when focusing the element is crucial to the application, then the following workaround can be placed under the ScriptManager of the page:

<script>
    Telerik.Web.UI.RadTreeView.prototype._applyWaiAria = function () {
        var $ = $ || $telerik.$;

        if (!this.get_enableAriaSupport())
            return;

        var treeDomElement = this.get_childListElement();
        var allNodes = this.get_allNodes();
        var treeView = this;

        // apply role "presentation" to all dom elements that shouldn't be readed
        $(treeView.get_element()).attr("role", "tree");
        $(".rtLI, .rtTop, .rtMid, .rtBot, .rtSp", treeView.get_element()).attr("role", "presentation");
        // apply role "tree"
        $(treeDomElement).attr("role", "presentation");

        // apply the roles "treeitem" and "group"
        $.each(allNodes, function () {
            var nodeTextDomElement = this.get_textElement();
            var nodeCollectionDomElement = this.get_childListElement();

            // apply role "group"
            if (nodeCollectionDomElement)
                nodeCollectionDomElement.setAttribute("role", "group");

            if (nodeTextDomElement) {
                // apply role "treeitem"
                nodeTextDomElement.setAttribute("role", "treeitem");

                // apply role=treeitem aria-checked
                if (this.get_checkable())
                    nodeTextDomElement.setAttribute("aria-checked", this.get_checked() ? "true" : "false");

                // aply role=treeitem aria-disabled
                nodeTextDomElement.setAttribute("aria-disabled", this.get_enabled() ? "false" : "true");

                // apply role=treeitem aria-expanded
                if (this._hasChildren())
                    nodeTextDomElement.setAttribute("aria-expanded", this.get_expanded() ? "true" : "false");

                // apply role=treeitem aria-selected
                nodeTextDomElement.setAttribute("aria-selected", this.get_selected() ? "true" : "false");

                // apply role=treeitem aria-grabbed
                var ariaGrabbed = treeView.get_enableDragAndDrop() && this.get_allowDrag();
                nodeTextDomElement.setAttribute("aria-grabbed", ariaGrabbed ? "false" : "undefined");

                // apply tabindex to the treeitems
                nodeTextDomElement.setAttribute("tabindex", "-1");
                if (this.get_selected()) {
                    //$(nodeTextDomElement).focus();
                    //https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
                    nodeTextDomElement.focus({ preventScroll: true });
                }
            }
        });

        // apply role=tree aria-multiselectable
        $(treeDomElement).attr("aria-multiselectable", this.get_multipleSelect() ? "true" : "false");

        // apply role=tree aria-disabled
        $(treeDomElement).attr("aria-disabled", this.get_enabled() ? "false" : "true");
    }
</script>

Regards, Peter Milchev
Progress Telerik