Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 19 Apr 2024 14:28 by ADMIN
Release 2024 Q2
Danielle
Created on: 19 Apr 2024 09:53
Category: Grid
Type: Bug Report
0
AXE error: Elements must only use supported ARIA attributes

Found an additional issue when implementing this on a project:

When aria-enabled=true and we follow their instructions if we have a gridnumericcolumn in the grid, then we get a finding that "Elements must only use supported ARIA attributes" because To solve this problem, you need to fix the following:

 

ASPX

                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowFilteringByColumn="true" OnNeedDataSource="RadGrid1_NeedDataSource" EnableAriaSupport="true">
                    <ClientSettings>
                        <ClientEvents OnGridCreated="OnGridCreated" />
                    </ClientSettings>
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" />
                            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
                            <telerik:GridCheckBoxColumn DataField="IsActive" HeaderText="Active" UniqueName="IsActive" />
                            <telerik:GridNumericColumn DataField="Score" HeaderText="Score" UniqueName="Score" DataType="System.Int32" DataFormatString="{0:N0}" />
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

ASPX.CS

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        // Creating a dummy data source
        var data = new List<DummyData>
        {
            new DummyData { ID = 1, Name = "John Doe", IsActive = true, Score = 88 },
            new DummyData { ID = 2, Name = "Jane Doe", IsActive = false, Score = 92 }
        };

        RadGrid1.DataSource = data;
    }

    public class DummyData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsActive { get; set; }
        public int Score { get; set; }    
    }

1 comment
ADMIN
Rumen
Posted on: 19 Apr 2024 10:04

Hi Danielle,

Thank you for reporting this AXE accessibility issue!

I would suggest the following fix for it:

                <script>
                    function OnGridCreated(sender) {
                        sender.get_masterTableView().get_element().setAttribute("aria-busy", "true");

                        var filterInputs = sender.get_masterTableView().get_element().querySelectorAll('.rgFilterRow input[type="text"][role="textbox"]');

                        filterInputs.forEach(function (input) {
                            if (input.hasAttribute('aria-valuemax')) {
                                input.removeAttribute('aria-valuemax');
                            }
                            if (input.hasAttribute('aria-valuemin')) {
                                input.removeAttribute('aria-valuemin');
                            }
                        });
                    }
                </script>
                <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowFilteringByColumn="true" OnNeedDataSource="RadGrid1_NeedDataSource" EnableAriaSupport="true">
                    <ClientSettings>
                        <ClientEvents OnGridCreated="OnGridCreated" />
                    </ClientSettings>
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" />
                            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
                            <telerik:GridCheckBoxColumn DataField="IsActive" HeaderText="Active" UniqueName="IsActive" />
                            <telerik:GridNumericColumn DataField="Score" HeaderText="Score" UniqueName="Score" DataType="System.Int32" DataFormatString="{0:N0}" />
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

Please test it and let me know the result.

As a small token of gratitude I also updated your Telerik points.

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources! 
Create an account Log In
View
Type
Status
Category