Unplanned
Last Updated: 19 Sep 2021 01:37 by Narendra
karthikeyan
Created on: 07 Jun 2021 08:51
Category: Grid
Type: Bug Report
1
Axe DevTools accessibility issues in RadGrid

Axe Tool Accessibility

 

Structure for reproduction:

<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid_CIPCodes" GridLines="None" runat="server" Skin="Bootstrap" role="application"
    PageSize="10"
    AllowPaging="true"
    AutoGenerateColumns="False"
    OnNeedDataSource="RadGrid_CIPCodes_NeedDataSource"
    AllowSorting="true"
    AllowFilteringByColumn="true"
    GroupingSettings-CaseSensitive="False" FilterType="Combined"
    EnableAriaSupport="true">
    <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="OrderID" HorizontalAlign="NotSet" EditMode="Batch" Caption="Master Table" AutoGenerateColumns="False"
        AllowMultiColumnSorting="false"
        NoMasterRecordsText="No new CIP Code(s) to add!" ShowHeadersWhenNoRecords="true">
        <BatchEditingSettings EditType="Row" />
        <CommandItemSettings ShowAddNewRecordButton="false" SaveChangesText="Save" CancelChangesText="Cancel" ShowRefreshButton="false" />
        <SortExpressions>
            <telerik:GridSortExpression FieldName="OrderID" SortOrder="Ascending" />
        </SortExpressions>
        <PagerStyle Mode="NextPrevAndNumeric" PageButtonCount="3" Position="Bottom" ChangePageSizeButtonToolTip="PageSizeButton" ChangePageSizeTextBoxToolTip="ChangePageSizeToolTip" />
        <RowIndicatorColumn CurrentFilterFunction="Contains" FilterListOptions="VaryByDataType" Visible="False">
            <HeaderStyle />
        </RowIndicatorColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" HeaderStyle-Width="100px" HeaderText="CIP Code" SortExpression="CIP_Code" UniqueName="CIP_Code" ForceExtractValue="InEditMode"
                FilterListOptions="VaryByDataType" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" ReadOnly="true" FilterControlWidth="90px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry" HeaderStyle-Width="210px" HeaderText="Display Text" SortExpression="Display_Text" ForceExtractValue="InEditMode" AutoPostBackOnFilter="true"
                UniqueName="Display_Text" CurrentFilterFunction="Contains" ShowFilterIcon="false">
                <ColumnValidationSettings EnableRequiredFieldValidation="true">
                    <RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
                    </RequiredFieldValidator>
                </ColumnValidationSettings>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderStyle-Width="210px" HeaderText="Value" ShowFilterIcon="false" UniqueName="Disp_Value" DataField="ShipCountry" SortExpression="Disp_Value" ForceExtractValue="InEditMode" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderStyle-Width="210px" HeaderText="Open Doors Code" UniqueName="OpenDoorsCode" DataField="ShipCountry" AllowFiltering="false" HeaderStyle-Font-Bold="true" ConvertEmptyStringToNull="true"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="STEM Eligible" DefaultInsertValue="" HeaderStyle-Width="100px" UniqueName="StemEligible" AllowFiltering="false" HeaderStyle-Font-Bold="true">
                <ItemTemplate>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="StemEligibleDropDown">
                        <Items>
                            <telerik:DropDownListItem Text="" Value="" Selected="true" />
                            <telerik:DropDownListItem Text="Yes" Value="1" />
                            <telerik:DropDownListItem Text="No" Value="0" />
                        </Items>
                    </telerik:RadDropDownList>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridCheckBoxColumn HeaderStyle-Width="100px" HeaderText="Add to DB" HeaderTooltip="header tooltip" UniqueName="AddToDB" AllowFiltering="false" HeaderStyle-Font-Bold="true" ToolTip="Is Checked?"></telerik:GridCheckBoxColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true"></ClientSettings>
    <FilterMenu>
        <CollapseAnimation Type="OutQuint" Duration="100" />
    </FilterMenu>
</telerik:RadGrid>

 

Data binding

protected void RadGrid_CIPCodes_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = OrdersTable();
}

private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
    dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
    dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
    dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < 70; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
        row["Freight"] = index * 0.1 + index * 0.01;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    return dt;
}

 

 

 

 

 

 

1 comment
Narendra
Posted on: 19 Sep 2021 01:37
When can we get the RadGrid mode accessible compliant? Accessibility is becoming a top priority for us.