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

2 posts, 0 answers
  1. Eric
    Eric avatar
    7 posts
    Member since:
    Dec 2013

    Posted 02 Aug 2019 Link to this post

    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

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    654 posts

    Posted 05 Aug 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top