I work in an environment of Visual Studio 2013 C # aspx ie10 See the attached project. After pressing the Send key twice, I get the message below. The control ID is generated automatically by Rad. Thanks in advance KAMARA YAIR Email KAMARA.Y@LAVIETIMETECH.COM Exception details: Unhandled exception at line 15, column 9936 in http://localhost:53353/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=3.5.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:he-IL:eb198dbd-2212-44f6-bb15-882bde414f00:ea597d4b:b25378d2;Telerik.Web.UI,+Version=2014.1.403.35,+Culture=neutral,+PublicKeyToken=121fae78165ba3d4:he-IL:64f74e2d-5497-4ab7-8321-89bccc22f4bb:16e4e7cd:86526ba7:874f8ea2:f7645509:24ee1bba:e330518b:1e771326:88144a7a:8e6f0d33:6a6d718d:ed16cbdc 0x800a139e - JavaScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Multiple controls with the same ID 'ctl02' were found. FindControl requires that controls have unique IDs.
Observe the below video, demonstrating the issue : http://screencast.com/t/pC1V29UwYQ83 Adding another, not visible textarea to absorb the focus can be used as a workaround: <telerik:RadTabStrip ID="rtsRFT" runat="server" Skin="Office2007" MultiPageID="rmpRTF" SelectedIndex="0" ShowBaseLine="True" OnClientTabSelected="OnClientTabSelected"> <Tabs> <telerik:RadTab Text="Description" TabIndex="61" ToolTip="Click to view description" SelectedCssClass="SelectedTab" PageViewID="pDesription"> </telerik:RadTab> <telerik:RadTab Text="Notes" TabIndex="63" ToolTip="Click to view notes" PageViewID="pNotes"> </telerik:RadTab> </Tabs> </telerik:RadTabStrip> <div class="welcomeTab" style="height: 100%"> <telerik:RadMultiPage ID="rmpRTF" runat="server" SelectedIndex="0"> <telerik:RadPageView ID="pDesription" runat="server"> <div> <telerik:RadEditor ID="txtDescription" runat="server" Width="100%" Height="250px"> </telerik:RadEditor> </div> </telerik:RadPageView> <telerik:RadPageView ID="pNotes" runat="server" Height="100%"> <div> <telerik:RadEditor ID="txtNote" runat="server" Width="100%" Height="250px"> </telerik:RadEditor> </div> </telerik:RadPageView> </telerik:RadMultiPage> </div> <script type="text/javascript"> function OnClientTabSelected(sender, args) { $telerik.$("#inboxId").focus(); } </script>
Please see the following Forum topic and attached images: http://www.telerik.com/forums/multi-row-tabs#i-uWt1OdnEKceUHt32s43Q We would consider this to be a bug, and the response we received back from Ivan Danchev was less than satisfactory given that this topic is now over 5 years old. Please consider adding this to your roadmap and addressing this behaviour sometime in the near future.
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".
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.
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"; }
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. |
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.
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>
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:
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>