Add accessibility attributes to TH in Grid

[Mark]

I understand that KendoReact is 508 compliant by certain standards, but my agency tests to a different standard.

I'm getting reports that the grid is not associated cells with headers. I've researched different ways to get around this and the solution I've come up with is to add ID to the TH tags and then using the HEADERS attribute to the data cells with the ID in the associated header. Example below:

<table>
  <tr>
    <th id="colOneHeader">Col One</th>
    <th id="colTwoHeader">Col Two</th>
  </tr>
  <tr>
    <td headers="colOneHeader">Col One Data</td>
    <td headers="colTwoHeader">Col Two Data</td>
  </tr>
</table>

My issue is adding the ID attribute to the TH tags in the grid. I've attempted the following:

const HeaderCustomCell = (props: any) => {

  return (
    <HeaderThElement scope="col" columnId={ props.thProps?.columnId || "" } id={ props.thProps.title + "_Header" } { ...props.thProps }>
      { props.children }
    </HeaderThElement>
  );
};

<Grid  cells={{ headerCell: HeaderCustomCell }} ...

The SCOPE and ID attributes are ignored and do not show up in the TH tags in the source code. I also tried just returning a basic <th> node from the HeaderCustomCell method and it did not work.

Is there a different method to add custom attributes to the HeaderThElement?

Thanks in advance

[Yanko]

Hi, Mark,

Thank you for the provided code snippets.

I tried reproducing the described issue in the following demo, however,  the id and scope properties appear in the source code:

• https://stackblitz.com/edit/react-rtmzcz?file=app%2Fapp.jsx 

Can you please provide a runnable example that reproduces this behavior? This will enable me to debug it locally and determine why the `scope` and `id` attributes are missing and assist further.

Looking forward to your reply.

Regards,
Yanko
Progress Telerik

[Mark]

Yanko,

Thank you very much for the reply.

My source code looks nearly identical to yours, however, I did notice that you are using version 8.2 of the grid while I'm using 5.15.

I've got over 20 SpFx web parts using Kendo so upgrading is a bit of a chore, but I may upgrade this one project to try to determine if that is indeed the issue.

Thank you

[Yanko]

Hello, Mark,

With the older version the "cells" property is not available and you can achieve the desired result for adding additional attributes to the TH elements only with JavaScript within React.useEffect after the Grid is rendered. You can get reference to the `TH` elements and add the attributes manually. For the data cells, you can still use the cellRender approach from my previous example (which is supported in the old versions). 

Regards,
Yanko
Progress Telerik