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

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 

Only the selected tab has an aria-selected attribute. According to the documentation I can find, all tabs should have aria-selected, and be set to true or  false as appropriate.
https://www.w3.org/TR/wai-aria-1.1/#aria-selected

aria-selected (state)§

Characteristics:

Characteristic	Value
Used in Roles:	gridcell option row tab
Inherits into Roles:	columnheader rowheader treeitem
Value:	true/false/undefined

Values:

Value	Description
false	The selectable element is not selected.
true	The selectable element is selected.
undefined (default)	The element is not selectable.

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.

Currently the RadTabStrip + Google Maps integration suffers a limitation e.g. if the map is within a hidden tab, there are displacements.

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.

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

1)If already one tab opened means-->just i want to select tab(without postback)

for that me use set_selected(true) and select().But its also fires OnClientTabSelected Client Side API function.

So how can i achieve this?

 OnClientTabSelecting function available to get focus of user select a tab.Becoz i want two functionality

1)I want  postback for some specific of the tabs when user clicks already opened tabs

2)I want to select a Tab(without postback) when user clicks from Leftmenu(RadPanelBar)

Pls explain with sample code how to achieve both Its very urgent

3) In my left side user control  RadPanelItem me used.Based on this only tabs are opened based

Functionality me need -->whenever user select a already opened tabs its corresponding menu also should select in RadPanelbar(PanelItem)

Me tried this logic
============
function ClientTabsSelected(sender, args) {
var tab = args.get_tab();
GetItemText(tab.get_text());
}

    function GetItemText(currenttabtext) { //This function me put left side user control.

          var panelBar = $find("<%=RadPanelBar1.ClientID%>");

           var currentitem = panelBar.findItemByText(currenttabtext);

           if (currentitem) {
               currentitem.set_selected(true);
               currentitem.expand();
          }

      }
================================

Its works only when panelitem expand.If already selected item in Panelbar collapsed means.Its select properly (rpSelected CSS Class assigned  me find using inspect element)

But its not expand..Please help me solve this also

Please response soon.Its very urgent

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>

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.

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.