Accessibility Insights is reporting invalid markup on all tabs in the TabList.
When consulting the online aria specifications I see that elements with role="tablist" support aria-level="#" where number is > 0. (https://www.w3.org/TR/wai-aria-1.2/#tablist) However, elements with role="tab" do not. (https://www.w3.org/TR/wai-aria-1.2/#tab)
If possible, we would like to see the aria-level tag moved to the correct page elements in the next release. (Thanks for correcting the aria-level="0" problem previously.)
I believe this may be the compliance issue Sunil was reporting previously here: https://feedback.telerik.com/aspnet-ajax/1413112-this-ul-should-only-contain-li-elements-without-an-aria-assigned-role.
Thank you for reporting this, Jeff,
The following script can be used as a temporary workaround until the issue is fixed in the source code:
Telerik.Web.UI.RadTabStrip.prototype._applyAriaAttributesToChildren = function () {
var $ = $ || $telerik.$;
var tabs = this.get_allTabs();
var tab;
var attr;
for (var i = 0, l = tabs.length; i < l; i++) {
tab = tabs[i];
var arialevel = tab.get_level() + 1;
attr = {
"role": "tab",
"aria-disabled": !tab.get_enabled(),
//"aria-level": tab.get_level() + 1
};
if (tab.get_pageView()) {
attr["aria-controls"] = tab.get_pageView().get_id();
}
$(tab.get_element()).attr(attr);
$(tab.get_element()).closest("ul.rtsUL").attr("aria-level", arialevel.toString())
}
}
Regards,
Peter Milchev
Progress Telerik