Unplanned
Last Updated: 15 Sep 2022 12:10 by ADMIN
Neal
Created on: 15 Sep 2022 12:03
Category: TreeView
Type: Bug Report
1
Screen readers announce "checked/ not checked" when CheckBox feature is disabled

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.

1 comment
ADMIN
Doncho
Posted on: 15 Sep 2022 12:10

Temporary workaround:

Add the following JavaScript code on the page to override the built-in logic for applying the aria attributes of the RadTreeView (the only change from the original code is highlighted below):

if (Telerik.Web.UI.RadTreeView) {
    Telerik.Web.UI.RadTreeView.prototype._applyWaiAria = function () {
        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 (treeView._checkBoxes && 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();
                }
            }
        });

        // 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');
    }
}

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.