In Development
Last Updated: 14 Aug 2019 11:53 by ADMIN
Sunil Sutar
Created on: 13 Jun 2019 10:43
Category: TabStrip
Type: Bug Report
1
This UL should only contain li elements (without an ARIA-assigned role)

Few of our clients reported the following issue with respect to WCAG 2.0 SC 4.1.2 standard. (508 Standard and compliance) -

 
Practice Function (example)
Ensure sub-lists are marked up properly This UL should only contain li elements (without an ARIA-assigned role), script elements (without an ARIA-assigned role) or template elements (without an ARIA-assigned role); or
 
elements with a role=listitem attribute; as direct child elements

 

Example: When Telerik Tabstrip has EnableAriaSupport=true, internally tabstrip is combination of ul-li with css to display the Tabs properly -

The html looks like as follows -  

<ul class="rtsUL">
    <li class="rtsLI rtsFirst" role="tab" aria-disabled="false" aria-level="0" aria-controls="LayoutPageView">
        <a accesskey="L" title="Layout" class="rtsLink rtsBefore" id="LayoutTab" href="#"><span class="rtsOut">
            <span class="rtsIn">
                <span class="rtsTxt">
                    <h2 class="RadTabStrip RadTabStrip_Default"><u>L</u>ayout</h2>
                </span>
            </span>
        </span>
        </a>
    </li>
    <li class="rtsLI" role="tab" aria-disabled="false" aria-level="0" aria-controls="SearchPageView" aria-selected="true" id="SearchTabStrip_active_tab">
        <a accesskey="S" title="Search" class="rtsLink rtsSelected" id="SearchTab" href="#">
            <span class="rtsOut">
                <span class="rtsIn">
                    <span class="rtsTxt">
                        <h2 class="RadTabStrip RadTabStrip_Default"><u>S</u>earch</h2>
                    </span>
                </span>
            </span>
        </a>
    </li>
    <li class="rtsLI rtsLast" role="tab" aria-disabled="false" aria-level="0" aria-controls="ResultsPageView">
        <a accesskey="R" title="Statewide Search Results 0 records" class="rtsLink rtsAfter" id="ResultsTab" href="#">
            <span class="rtsOut">
                <span class="rtsIn">
                    <span class="rtsTxt">
                        <h2 class="RadTabStrip RadTabStrip_Default">Statewide Search<u>R</u>esults (0)</h2>
                    </span>
                </span>
            </span>
        </a>
    </li>
</ul>


Observe the aria attributes which are on li elements. Is that really necessary considering the compliance? (as mentioned in practice and example).

 

Please let me know when are you going to fix this for compliance. 

--

Sunil 

3 comments
ADMIN
Rumen
Posted on: 14 Aug 2019 11:53
Hi Sunil,

We just released the Latest Internal Build 2019.2.814 of the suite with a fix for this issue.

You can check the release notes at https://www.telerik.com/support/whats-new/aspnet-ajax/release-history/ui-for-asp-net-ajax-2019-2-814-(nightly-build-2019-08-14) as well as download the Telerik_UI_for_ASP.NET_AJAX_2019_2_814_Dev_hotfix.zip installation from https://www.telerik.com/account/product-download?product=RCAJAX.



Regards,
Rumen
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.
Sunil Sutar
Posted on: 13 Jun 2019 15:33

So, what is the plan to include it in which release?

 

Just curious to know so that we can update our customers and we will take out the workaround from our system. 

--

Sunil 

ADMIN
Peter Milchev
Posted on: 13 Jun 2019 10:46
Hello Sunil,

According to the provided documentation, the Tabs are indeed incorrect and according to the following article, adding the role='tablist' to the parent <ul> element should make them compliant: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role

A possible workaround is using the OnClientLoad event to set the tablist role for all <ul> elements:

<script>
    function OnClientLoad(sender, args) {
        if (sender.get_enableAriaSupport()) {
            $telerik.$(sender.get_element()).find(".rtsUL").attr("role", "tablist");
        }
    }
</script>
 
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.