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>
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:
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
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>
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.
https://www.w3.org/TR/wai-aria-1.1/#aria-selected
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:
- Single-selection containers where the currently focused item is not selected. The selection normally follows the focus, and is managed by the user agent.
- Multiple-selection containers. Authors SHOULD ensure that any selectable descendant of a container in which the
aria-multiselectableattribute istruespecifies a value of eithertrueorfalsefor thearia-selectedattribute.
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. |