Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 21 Oct 2020 15:39 by ADMIN
Chris Vaughn
Created on: 30 Sep 2020 12:36
Category: TabStrip
Type: Bug Report
0
JAWS says "Selected" for every tab in a tab strip instead of only for the currently selected tab

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>

1 comment
ADMIN
Peter Milchev
Posted on: 30 Sep 2020 12:41

As a temporary workaround, the following script can be loaded after the ScriptManager:

Telerik.Web.UI.RadTabStrip.prototype._applyAriaAttributesToChildren = function () {
    var tabs = this.get_allTabs();
    var tab;
    var attr;

    for (var i = 0, l = tabs.length; i < l; i++) {
        tab = tabs[i];

        attr = {
            "role": "tab",
            "aria-disabled": !tab.get_enabled(),
            "aria-level": tab.get_level() + 1,
            "aria-selected": tab.get_selected().toString()
        };

        if (tab.get_pageView()) {
            attr["aria-controls"] = tab.get_pageView().get_id();
        }

        $(tab.get_element()).attr(attr);
    }
}
Telerik.Web.UI.RadTabStrip._toggleAttribute = function (element, attributeName, attributeValue, toggle) {
    var $element = $(element);

    if (toggle || (element._item && element._item instanceof Telerik.Web.UI.RadTab && attributeName == "aria-selected")) {
        $element.attr(attributeName, attributeValue);
    } else {
        $element.removeAttr(attributeName);
    }
}

Regards,
Peter Milchev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Create an account Log In
View
Type
Status
Category