Approved
Last Updated: 31 Oct 2019 11:54 by ADMIN
Jeff
Created on: 10 Oct 2019 19:59
Category: TabStrip
Type: Bug Report
0
Role="tab" does not support aria-level attribute

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

1 comment
ADMIN
Peter Milchev
Posted on: 17 Oct 2019 08:39

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

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.