Issue on Tabstrip tabs. I am working on ADA 508 Compliance issues. The screen reader (NVDA) is not reading the text on the tabs. I have tried applying the options highlighted below but nothing is working
When a TabStrip has Keyboard navigation active, the focus CSS class (rtsFocused) is not removed from the previously active tab when clicking on other tabs with the mouse.
<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server">
<Tabs>
<telerik:RadTab Text="Examples" />
<telerik:RadTab Text="Configurator">
<Tabs>
<telerik:RadTab Text="Default"></telerik:RadTab>
<telerik:RadTab Text="Test"></telerik:RadTab>
<telerik:RadTab Text="Final"></telerik:RadTab>
</Tabs>
</telerik:RadTab>
<telerik:RadTab Text="Quick Start" />
<telerik:RadTab Text="Help">
<Tabs>
<telerik:RadTab Text="Search"></telerik:RadTab>
<telerik:RadTab Text="Topics"></telerik:RadTab>
<telerik:RadTab Text="Troubleshooting"></telerik:RadTab>
</Tabs>
</telerik:RadTab>
<telerik:RadTab Text="Purchase" />
</Tabs>
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="A" />
</telerik:RadTabStrip>
When no keyboard navigation is used, the behavior is acting correctly.
Code to replicate the issue:
<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" SelectedIndex="0">
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
<Tabs>
<telerik:RadTab Text="Examples">
</telerik:RadTab>
<telerik:RadTab Text="Configurator">
</telerik:RadTab>
<telerik:RadTab Text="Quick Start">
</telerik:RadTab>
<telerik:RadTab Text="Help">
</telerik:RadTab>
<telerik:RadTab Text="Purchase">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
AXE Errors:
- Frames must have title attribute - Element location: iframe[src$="content.aspx"]
- Elements must only use allowed ARIA attributes - Element location: #RadTabStrip1
Setup to reproduce:
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" EnableAriaSupport="true" SelectedIndex="0">
<AriaSettings Label="TabStrip" />
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
<Tabs>
<telerik:RadTab Text="Tab 1">
</telerik:RadTab>
<telerik:RadTab Text="Tab 2">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" EnableAriaSupport="true">
<telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="content.aspx">
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="content.aspx">
</telerik:RadPageView>
</telerik:RadMultiPage>
The issue is replicated in R3 2021 only.
<telerik:RadTabStrip runat="server" ID="RadTabStrip1" >
<Tabs>
<telerik:RadTab Text="Tab 1">
<Tabs>
<telerik:RadTab Text="fail"></telerik:RadTab>
</Tabs>
</telerik:RadTab>
<telerik:RadTab Text="Tab 2"></telerik:RadTab>
<telerik:RadTab Text="Tab 3"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>Solution from Admin:
Place the load/script below somewhere under the ScriptManager. It can be added in the MasterPage if needed:
<script>
Sys.Application.add_init(function fixTabStrip() {
if (Telerik && Telerik.Web && Telerik.Web.UI && Telerik.Web.UI.RadTabStrip) {
Telerik.Web.UI.RadTabStrip.prototype._childInserted = function (index, tab, owner) {
this._allTabs = null;
if (this._cachedSelectedTab) {
owner._setSelectedIndex(this._cachedSelectedTab.get_index());
this._cachedSelectedTab = null;
}
if (tab._cachedSelected) {
owner._setSelectedIndex(index);
tab._cachedSelected = false;
}
Telerik.Web.UI.RadTabStrip.callBaseMethod(this, "_childInserted", [index, tab, owner]);
if (tab.get_isBreak()) {
var breakElement = document.createElement("li");
breakElement.className = "rtsBreak";
owner.get_childListElement().insertBefore(breakElement, tab._element.nextSibling);
}
//if (tab.get_parent() && tab.get_parent() instanceof Telerik.Web.UI.RadTab && tab.get_parent().get_selected()) {
// $telerik.$(tab.get_parent().get_levelElement()).removeClass("rtsHidden");
//}
}
}
});
</script>
When adding a child tab programmatically to a second TabStrip tab that has no child item, the newly created child tab will not show up.
Workaround is to remove the class that was hiding the child element:
if (selectedTab.get_tabs().get_count() > 0) {
$(selectedTab.get_levelElement()).removeClass("rtsHidden");
}
Workaround:
.rtsDropClueLeft {
margin: -0.5em 0 0 -0.75em;
}
.rtsDropClueLeft:before {
content: "\e005";
}
.rtsDropClueRight {
margin: -0.5em 0 0 -0.25em;
}
.rtsDropClueRight:before {
content: "\e007";
}
The disabled tabs don't look like disabled in Classic render mode.
This issue is not observable with the 2016 release as shown in the attached screenshot.
Workarounds:
1) You can change the color of the disabled items by applying the following class to the page:
.rtsLink.rtsDisabled {
color: #a5a5a5 !important;
}
2) Another option is to switch the rendering to Lightweight -> RenderMode="Lightweight".
Tab Strip scroll buttons do not work in RTL mode in Chrome. The issue can be reproduced here:
Scrolling and Multi-row Tabs Online Demo
Video:
Steps to reproduce:
Use the code below. Select the Members tab and press the tab key - nothing happens. Focusing the DataPicker is expected.
<a href="http://www.google.com">Google</a>
<div class="RadTabStripWrapper">
<telerik:RadTabStrip ID="rtsCommitteeTabs" runat="server" MultiPageID="rmpCommitteeTabViews" RenderMode="Lightweight">
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="T" />
<Tabs>
<telerik:RadTab PageViewID="pvMeetings" Value="Meetings" Text="Meetings">
</telerik:RadTab>
<telerik:RadTab PageViewID="pvMembers" Value="Members" Text="Members">
</telerik:RadTab>
<telerik:RadTab PageViewID="pvAttributes" Value="Other Information" Text="Other Information">
</telerik:RadTab>
<telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab1" Text="Link Doc Tab 1" Value="CommitteeLinkDocTab1">
</telerik:RadTab>
<telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab2" Text="Link Doc Tab 2" Value="CommitteeLinkDocTab2">
</telerik:RadTab>
<telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab3" Text="Link Doc Tab 3" Value="CommitteeLinkDocTab3">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
</div>
<div class="RadMultiPageWrapper">
<telerik:RadMultiPage ID="rmpCommitteeTabViews" runat="server">
<!-- Meetings Tab -->
<telerik:RadPageView runat="server" ID="pvMeetings" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvMembers" CssClass="MeetingsTab">
<telerik:RadDatePicker ID="datePickerMeetingsFrom" CssClass="DatePicker" runat="server" RenderMode="Lightweight" EnableAriaSupport="true" EnableKeyboardNavigation="true" aria-label="From date for the meeting date range filter">
<DateInput runat="server" ValidationGroup="MeetingDates" aria-label="From date for the meeting date range filter">
</DateInput>
</telerik:RadDatePicker>
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvAttributes" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab1" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab2" CssClass="MeetingsTab">
</telerik:RadPageView>
<telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab3" CssClass="MeetingsTab">
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
<a href="http://www.google.com">Google 2</a>
JAWS reads Tab selected when the focus is moved between tabs without selection:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" EnableAriaSupport="true" RenderMode="Lightweight" SelectedIndex="0" TabIndex="0">
<KeyboardNavigationSettings CommandKey="Alt" />
<Tabs>
<telerik:RadTab runat="server" Text="Root RadTab1">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab2">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab3">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab4">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab5">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
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.
We have set PerTabScrolling="true" on the tabStrip.
Then we have hidden a tab on the client side that is apart of the tabstrip.
Now when we scroll to the end of the list we receive a JavaScript error: Sys.InvalidOperationException: Cannot serialize non finite numbers.
This only happens when we hide a tab.
Scenario: RadButton within RadPageView part of RadMultiPageView integrated with RadTabStrip for switching PageViews.
When switching tabs, additional padding is applied to the text in RadButton. After a postback is made, padding is not applied anymore.
Hi Telerik team,
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 ARIA roles, states, and properties are valid | LI has an aria-level attribute of 0, which is not an integer value greater than, or equal to, 1 |
Example: visit https://demos.telerik.com/aspnet-ajax/tabstrip/examples/wai-aria-support/defaultcs.aspx
Observe the ul-li elements created for tabstrip. On each li element, there is aria-level attribute whose value is set to 0.
As per WCAG this value should start from 1. The value 0 is invalid. Refer: https://www.w3.org/TR/WCAG20-TECHS/ARIA12.html
Please let me know when are you going to fix this for compliance.
--
Sunil
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
|
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