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

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

1 Answer 24 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 02 Aug 2019, 11:19 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 05 Aug 2019, 04:30 PM

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.
Tags
TreeView
Asked by
Eric
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or