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.
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.