This UL should only contain li elements (without an ARIA-assigned role)

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 03 Sep 2019 16:12 by ADMIN

Release R3 2019

Sunil Sutar

Created on: 13 Jun 2019 10:43

Category: TabStrip

Type: Bug Report

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>

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

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

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