Completed
Last Updated: 06 Oct 2021 11:10 by ADMIN
Release R3 2021 SP1

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>

Completed
Last Updated: 19 Jun 2023 11:56 by ADMIN
Release R2 2023 SP1
Created by: n/a
Comments: 0
Category: TabStrip
Type: Bug Report
4
We noticed that we can get into the TabStrip (with Keyboard navigation enabled) with the tab key, unfortunately, we can't get out afterwards with back tab (SHIFT + TAB).
Completed
Last Updated: 17 May 2021 15:05 by ADMIN
Release R2 2021 SP1
ADMIN
Created by: Veselin Tsvetanov
Comments: 1
Category: TabStrip
Type: Bug Report
1

			
Completed
Last Updated: 03 Sep 2019 16:13 by ADMIN
Release R3 2019
Created by: Sunil Sutar
Comments: 2
Category: TabStrip
Type: Bug Report
1

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

PracticeFunction (example)
Ensure ARIA roles, states, and properties are validLI 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

Completed
Last Updated: 03 Sep 2019 16:12 by ADMIN
Release R3 2019

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

Unplanned
Last Updated: 12 May 2020 12:28 by ADMIN

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.

 

 

Unplanned
Last Updated: 13 Nov 2020 08:35 by ADMIN

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>

Unplanned
Last Updated: 13 Dec 2022 13:08 by David
Created by: David
Comments: 0
Category: TabStrip
Type: Bug Report
1

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>


Declined
Last Updated: 27 Nov 2015 14:41 by ADMIN
This markup:
<Telerik:RadTabStrip ID="detailsStrip" runat="server" MultiPageID="RadMultiPage1"
                            ClickSelectedTab="true" OnTabClick="detailsStrinp_TabClick" SelectedIndex="0"
                            Align="Justify" Orientation="VerticalLeft" EnableEmbeddedSkins="false" AutoPostBack="true"
                            Skin="WFS" ScrollChildren="true" OnClientTabSelected="onTabSelected">
                            <Tabs>
                                <Telerik:RadTab Text="General"  PageViewID="GeneralView">
                                </Telerik:RadTab>
                                <Telerik:RadTab Text="History" PageViewID="HistoryView">
                                </Telerik:RadTab>
                                <Telerik:RadTab Text="Dokumenty" PageViewID="DocsView">
                                </Telerik:RadTab>
                                <Telerik:RadTab Text="AddInfo" PageViewID="AddInfoView">
                                </Telerik:RadTab>
                                <Telerik:RadTab Text="Gallery" PageViewID="GalleryView">
                                </Telerik:RadTab>
                                <Telerik:RadTab Text="Process" PageViewID="ProcessView" Visible="false" />
                            </Tabs>
                            <TabTemplate>
                                 <div class="nav-item">
                                    <div class="nav-item-img"></div>
                                    <div class="nav-item-header"><%# DataBinder.Eval(Container,"Text") %></div>
                                </div>
                            </TabTemplate>
                        </Telerik:RadTabStrip>

Generates js issue:
if(D.TabStripOrientation.isVertical(H)){G="offsetHeight";
F=function(J,K){J.firstChild.firstChild.firstChild.style.height=K+"px";
(null reference)
Version: 2012.3.1016.35
Declined
Last Updated: 14 Mar 2014 09:21 by Elena
i have create tab by using tabstrip and assing pageview to that tab but on delete of tab the page view is not deleting .for deleteing  i have use close imagebutton,tab will delete but pageview is not delete.pls suggest me how to delete tab alone tab alone with pageview.
Declined
Last Updated: 16 Mar 2015 14:06 by Eli Avni
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.
Completed
Last Updated: 12 Oct 2015 12:01 by ADMIN
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>
Completed
Last Updated: 03 Nov 2016 13:38 by ADMIN
Won't Fix
Last Updated: 27 Nov 2015 15:22 by ADMIN
Created by: Bryan
Comments: 1
Category: TabStrip
Type: Bug Report
0
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.
Completed
Last Updated: 12 May 2016 10:35 by ADMIN
Completed
Last Updated: 27 Sep 2016 12:18 by ADMIN
ADMIN
Created by: Dimitar
Comments: 0
Category: TabStrip
Type: Bug Report
0

			
Completed
Last Updated: 02 Feb 2017 11:18 by ADMIN
Completed
Last Updated: 11 Aug 2021 18:32 by ADMIN
Release R2 2017 SP1
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".
1 2