1. Feedback
  2. React
  3. 40736

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

GridComponent not fully accessible

Package version - 20.3.47

Running site improve on the following GridComponent has raised two issues with SiteImprove accessibility tool:

ARIA - State or Property Not Supported

Complaining about having an aria-selected attribute on an anchor tag.  Seems that it's the page selected in the pagination component

Empty


1.3.1 Info and Relationships - No data cells assigned to table header

Issue seems to be the association of data cells to their table headers.  If I manipulate the rendered component so that the tbody compononent is in the same table definition as thead, the issue goes away.

However, this would involve implementing my own templates.  I would expect this to be accessible as standard.

GridComponet defined as follows:


      <GridComponent
        id="overviewgrid"
        allowPaging
        pageSettings={pageSettings}
        allowSorting
        allowFiltering
        filterSettings={filterSettings}
        allowSelection={false}
        dataSource={stubbedRegions}
        loadingIndicator={{ indicatorType: "Shimmer" }}
        ref={g => { gridInstance = g; }}
        enableHeaderFocus
      >

        <ColumnsDirective>
          <ColumnDirective field="id" visible={false} headerText="id" isPrimaryKey />
          <ColumnDirective field="name" headerText="Region Name" />
          <ColumnDirective field="active" headerText="Active" template={activeTemplateInstance} />
          <ColumnDirective field="id" headerText="Edit" template={editTemplateInstance} allowFiltering={false} />
        </ColumnsDirective>
        <Inject services={[Filter, Paging, Sort]} />
      </GridComponent>