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:
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>
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>
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.
In the RadMultipageView a portal URL is set as content. The user navigates to one of the pages within the portal. Now there is no way to go back to previous page or to the default landing page where the tab was initially at.
Requesting a new feature in the tab strip to allow navigate through the iframe history (back/forward) for a multipage view. It could be similar to the back/forward buttons of the browser but within the tab of the tab strip where the content URL is set in the multipage view. This could be set enable/disable by a setting.
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.
aria-selected
(state)§Indicates the current "selected" state of various widgets. See related aria-checked
and aria-pressed
.
This attribute is used with single-selection and multiple-selection widgets:
aria-multiselectable
attribute is true
specifies a value of either true
or false
for the aria-selected
attribute.Any explicit assignment of aria-selected
takes precedence over the implicit selection based on focus. If no DOM element in the widget is explicitly marked as selected, assistive technologies MAY convey implicit selection which follows the keyboard focus of the managed focus widget. If any DOM element in the widget is explicitly marked as selected, the user agent MUST NOT convey implicit selection for the widget.
Characteristic | Value |
---|---|
Used in Roles: | |
Inherits into Roles: | |
Value: | true/false/undefined |
Value | Description |
---|---|
false | The selectable element is not selected. |
true | The selectable element is selected. |
undefined (default) | The element is not selectable. |
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
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
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"; }
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 is attached. It focuses the first focusable element on the page and you can easily change that logic. We have already taken upon ourselves the task of managing the keyboard navigation in a container (the pageview). Please leave your comments how this should be fixed, because there are many options. For example: - we can focus the first focusable element, in a fashion similar to the workaround. Caveat: the list is incomplete, there are more focusable elements. Also, non-sequential tabIndex values set by the developer will not be honored. We may implement logic that counts the tabIndexes and focuses the smallest one, but this is complex, error prone and browsers tend to return bad values for this attribute, especially when it is set to -1. Also, this may not be the desired behavior by the developers. - we can focus the pageview element. Caveat: you may be unable to enter its child inputs at all, depending on the page setup and the tabIndex values. - we can consider setting tabIndex to -1 for all focusable elements in other pageViews akin to the modal backgrounds for controls like window and tooltip. The goal being to let the natural flow of the page take over and the browser to do this job, not our JS code. Caveat: we can still break the navigation logic on the page and this also has low performance when changing many tabIndex attributes at once.
Refer Support Id 1122136 ( https://www.telerik.com/account/support-tickets/view-ticket?threadid=1122136 ) for screen shots and explanation... Where we use the ShowBaseLine property in Horizontal Orientation, the same feature is not available when in Vertical Orientation