We are trying to make our website accessible using Wave and one thing we are struggling with is TreeViews with checkboxes enabled. Sometimes the checkbox is rendered as a span element and sometimes as an input element. In the second case Wave is recognizing an error for each node as the input element is not associated with its neighbouring text. You can see this on your own website: https://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx. For the server side tree the checkboxes are rendered as inputs and there is no label associated with it.

This behaviour doesn't change when I set EnableAriaSupport="true".

I have enabled aria settings for the treeview control, but when I am trying to navigate via key board it announces some thing like  {level} {selected value/text} {checked/not checked} or {selected value/text} {checked/not checked} {level},

I don't want {checked/not checked}, to be announced.

Reproduction: 

• online demo - https://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx 
• code:

  <telerik:RadTreeView runat="server" RenderMode="Lightweight" ID="RadTreeView2" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true">

Workaround from admin: Use the following OnClientLoad client-side event handler for the RadTreeView

function OnClientLoad(sender) {
    if ($telerik.isTouchDevice && Telerik.Web.Platform.android) {
        $telerik.$(sender.get_element()).off("scroll")
    }
}

Reproduction:
Subscribe to Node Click event and set EnableDragAndDrop=true.

Temporary Workaround: Placing the following script below the ScriptManager:

var $ = $telerik.$,
$T = Telerik.Web.UI,
$J = Sys.Serialization.JavaScriptSerializer,
CLICK = $telerik.isTouchDevice ? "touchend" : "click",
MOUSEDOWN = $telerik.isTouchDevice ? "touchstart" : "mousedown",
MOUSEMOVE = $telerik.isTouchDevice ? "touchmove" : "mousemove",
MOUSEUP = $telerik.isTouchDevice ? "touchend" : "mouseup",
DOMActivate = "DOMActivate",
treeviewRegEx;

Telerik.Web.UI.RadTreeView.prototype._click = function (e) {
    if (this._eventMap.skipElement(e, "rtIn"))
        return;
    if (this._preventClick) {
        // Dragging and dropping over the same node produces unwanted click
        this._preventClick = false;
        return;
    }

    var node = this._extractNodeFromDomElement(e.eventMapTarget);
    if ($telerik.isTouchDevice) {
        if (!this._treeTouchScroll._dragCanceled) {
            clearTimeout(this.longTouchID);
            this.longTouchID = 0;
        }
        /*if (this._scrolledInMobileDevice) {
                           
            this._scrolledInMobileDevice = false;
            return;
        }
        else */ if (this._dragging) {
            return;
        }
    }


    if (this._raiseCancelEvent("nodeClicking", node, e)) {
        e.preventDefault();
        return;
    }
                    
    if (!node.get_isEnabled()) {
        this._raiseEvent("nodeClicked", node, e);
        e.preventDefault();
        return;
    }

    var ctrlKey = e.ctrlKey || e.rawEvent && e.rawEvent.metaKey;

    this._hideContextMenus();

    if (this.get_multipleSelect() && (ctrlKey || e.shiftKey || $telerik.isTouchDevice)) {
        if ($telerik.isTouchDevice) {
            if (node && node.get_isEnabled() && !this._touchDragEnd) {
                node.set_selected(!node.get_selected());
            }
            this._touchDragEnd = false;
        }

        if (ctrlKey) {
            node.set_selected(!node.get_selected());
        }
        else if (e.shiftKey) {
            this._handleShiftSelection(node);
        }

        this._raiseEvent("nodeClicked", node, e);
        return;
    }
    else {
        if (this.get_allowNodeEditing() && node.get_selected() && node.get_allowEdit()) {
            this._clearSelectedNodes();
            node.set_selected(true);
            this._startEdit(node, e);
            e.preventDefault();
            e.stopPropagation();
        }
        else {
            this._clearSelectedNodes();
            node.set_selected(true);
        }
    }

    this._raiseEvent("nodeClicked", node, e);

    this._postClickCommand(node);
}
function fixGridSchedulerComboBoxDropDownList() {
    // https://www.telerik.com/support/kb/aspnet-ajax/details/cannot-scroll-telerik-control-in-ios-11.3---the-page-scrolls-instead
    var fixed = $telerik.$(".RadTreeView.RadTouchExtender");
    fixed.on('touchmove', function (e) {
        e.preventDefault();
    });
}
Sys.Application.add_load(fixGridSchedulerComboBoxDropDownList);

Workaround: 

function OnClientLoad(sender, args) {
    sender._isEditableElementInTemplate = function (target) {

        return target && $(target).closest(".rtTemplate").length > 0 &&
                (target.tagName.toUpperCase() == 'INPUT' ||
                target.tagName.toUpperCase() == 'TEXTAREA' ||
                (target.isContentEditable));
    }
}

<telerik:RadTreeView OnClientLoad="OnClientLoad" ID="RadTreeView1" runat="server" ... >

The ClientNodeClicking and server-side NodeClick events are triggered when tap-to-scroll the Treeview in Android (taphold event).

Steps to reproduce:
1. Open http://demos.telerik.com/aspnet-ajax/treeview/examples/overview/defaultcs.aspx in mobile Chrome of Android device (or in Chrome emulator)
2. Tap over a node to Scroll the Treeview

Result - the tapped node gets selected

Expected - the Treeview detect the tap from holdtap events and the node is not selected when scrolling occurs

http://screencast.com/t/CySy2iAoiG4n

The TreeView wrapper is not expanded depending on its nodes width when used in LightWeight render mode. As a result of that the horizontall scrollers of the control's parent element are never shown thus the nodes of the control appear truncated.


The problem can be reproduced with the following configuration:
ASPX:

        <div style="width: 100px; height: 400px; border: 1px solid black; overflow: auto;">
            <telerik:RadTreeView ID="RadTreeView" runat="server" RenderMode="Lightweight">
            </telerik:RadTreeView>
        </div>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string[] cars = new string[] { "Porsche Carrera", "Ferrari F430", "Aston Martin DB9 and some more words foe a long node" };
            RadTreeView.DataSource = cars;
            RadTreeView.DataBind();
        }
    }

Keyboard navigation for the RadTreeView control should neglect  invisible nodes when deciding which node to select based on user navigation.

To know what I mean, please try the following:
- Navigate to the example at
http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/keyboard/defaultcs.aspx

- In the console of the developer tools of your browser, type the following:
$telerik.findTreeView("ctl00_ContentPlaceholder1_RadTreeView1").get_nodes().getNode(0).get_nodes().getNode(0).set_visible(false)

This will hide the "Calendar" tree node.

- Using your mouse, click on the "Mailbox - John Smith" root node.

- Press the ↓ key once. Notice how the selection disappears, while it should have gone to the "Contacts" node.

- Type the following in the console:
$telerik.findTreeView("ctl00_ContentPlaceholder1_RadTreeView1").get_selectedNode().get_visible()

The console prints "false" which means that the currently selected node is invisible, which is a wrong behaviour.

- Press ↓ once again, and the "Contacts" node will be selected.


This problem annoys me because I have a situation where I hide tree nodes based on what the user types in a filter text box. After the user filters the tree and tries to navigate using the keyboard, the procedure becomes weird.