Need help adding an accessible kendo react grid with custom cells.

0 Answers 35 Views
Grid
Chris
Top achievements
Rank 1
Chris asked on 10 Mar 2024, 05:25 PM

I am having trouble navigating the grid with a screen reader using table navigation commmands. I think the problem might be my custom cells. Is there anything else that needs returned bessides tds? Here is an example of my grid.

```

<Grid data={transactions}>
        <Column field="name" title="Name" />
        <Column field="amount" title="Amount" format="{0:c2}" />
        <Column
          field="date"
          title="Date"
          cell={(props: GridCellProps) => (
            <td>{new Date(props.dataItem["date"]).toDateString()}</td>
          )}
        />
        <Column field="description" title="Description" />
        <Column
          title="Actions"
          cell={(props: GridCellProps) => (
            <td>
              <button
                onClick={() => {
                  setShowEditTransaction(true);
                  setEditTransaction(props.dataItem);
                }}
              >
                Edit
              </button>
              &nbsp;
              <button
                onClick={() => {
                  setShowDeleteTransaction(true);
                  setTransactionToBeDeleted(props.dataItem);
                }}
              >
                Delete
              </button>
            </td>
          )}
        />
     

</Grid>

```

Thanks in advance.

Filip
Telerik team
commented on 12 Mar 2024, 06:07 PM

Hi, Chris,

Can you please elaborate more on what the accessibility issues are? Does the screen reader not narrate certain elements as you would like or is there an issue with the keyboard navigation where you cannot go through certain elements? 

When rendering custom cells it is advised to pass props to them as well, here is an example that showcases this approach here:

https://stackblitz.com/edit/react-bvhe9e-bm7yiz?file=app%2Fmain.jsx

More information on how to pass custom cells can be found here:

https://www.telerik.com/kendo-react-ui/components/grid/cells/

In case this is not what you are looking for please let me know on the details of the encountered issue and I will advise further.

Regards,
Filip

Chris
Top achievements
Rank 1
commented on 12 Mar 2024, 11:58 PM

That solved my issue. Switching to cells={{data:function}} as opposed to just using the cell function did the trick. Before when I was using table navigation with my screen reader it was ignoring my custom cells. Using the cells method must add some aria to make those cells compatible with the rest of the grid. Thank you for all your help.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Share this question
or