Declined
Last Updated: 22 Aug 2022 09:36 by ADMIN
eDAD
Created on: 15 Aug 2022 09:53
Category: UI for ASP.NET AJAX
Type: Bug Report
0
Incorrect role as 'link' is defined for button controls.

Test Environment:

OS: Windows_11
Version: 21H2
OS Build: 22000.795
Browser: Version 103.0.1264.71 (Official Build) (64-bit)
  1. Open URL: https://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx page in Edge Browser.
  2. Open NVDA
  3. Tab to the 'BOOK NOW' controls in the grid.
  4. Press Enter
  5. Observe the issue that 'BOOK NOW' is announced as a link, but it opens a popup instead of behaving as a link. It should have a role of button. 

Actual Behavior:   

Incorrect role as 'link' is defined for button control "Book Now." 

Expected Behavior:

In this case, the expected role is {button}. For the "Book Now" button the correct role should be defined.

All components need a proper role attribute, ideally with semantics. In rare cases a role attribute should be added to give full context and information to assistive technology. 

                                                                                                                                        

1 comment
ADMIN
Doncho
Posted on: 22 Aug 2022 09:36

Hello,

Thank you for reporting this behavior!

The button/link in question ("Book Now") is a custom asp:LinkButton control declared in the ItemTemplate of a GridTemplateColumn. As this button is not a built-in part of the Telerik RadGrid but a custom element in a Template, its accessibility compliance is supposed to be handled by the developer like any other configuration in the Template field. 

<telerik:GridTemplateColumn HeaderText="Book" ColumnGroupName="BookingInformation"
    AllowFiltering="false">
    <HeaderStyle Width="102px" />
    <ItemTemplate>
        <asp:LinkButton ID="BookButton" runat="server" Text="Book Now" OnClientClick='<%# String.Format("openConfirmationWindow({0}); return false;", Eval("CarID")) %>'
            CssClass="bookNowLink" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

In case a similar structure is needed for a custom application, you can replace the asp:LinkButton with an asp:Button, or Telerik RadButton, or manipulate the aria-role attribute of the rendered element with some custom code.

The referred Overview demo is designed mainly to showcase a common usage of the RadGrid control with some of its features. To better evaluate the built-in accessibility support of the RadGrid I would recommend using the WCAG 2.0 and Section 508 Accessibility Compliance demo where the EnableAriaSupport property of the Grid is enabled. Find more details regarding the accessibility settings of RadGrid in the WCAG 2.0 and Section 508 Accessibility Compliance article. 

We are currently in the process of improving RadGrid's Accessibility compliance and such feedback could prove really helpful for us. Please do not hesitate to let us know if you face any issues in terms of accessibility with the default structure of RadGrid.

I hope you will find this information useful.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.