I have a simple kendo grid, where I set its selected field to true.
When I open the application in the browser, the 'aria-selected' is set to true. However, when I use jest the aria-selected of all cells is set to false.
Also when I do a fireEvent.click() on the rowElement*, it doesn't trigger the onSelectionChange of the Kendo Grid React component.
Is there anything special that I need to do to be able to correctly interact with the grid in my jest tests?
* the rowElement is found by
return await findByRole(this.gridElement, (content, element) => {
if (element?.tagName === 'TR') {
return (element as any).attributes['aria-rowindex'].value === (rowIndex + 1).toString();
} else {
return false;
}
});1 Answer, 1 is accepted
Hello, Ewald,
Thank you for the provided sample for testing.
I tested the `aria-selected` classes of the Grid with the developer responsible for accessibility, and we found out that the `aria-selected` class is not set for the TR element because we are using an incorrect class internally. Basically, when disabling cell selection (row selection is used), the TR element should have the `aria-selected` class set to true but currently it is not present at all. On the other hand, when cell selection is enabled, the selected `td` element representing the cell will have its `aria-selected` class set to true and this is working as expected.
Therefore, I logged an issue for this bug, you can track it using the link below. Apologies for the inconvenience caused to you by this issue:
In addition, I added 1000 Telerik Points to your account as a small token of gratitude for your report.
However, I could see that you mentioned that the TR element in the browser has an aria-selected property set to true. Therefore, could you please send me a runnable example of the Grid such that this is reproduced since I was not able to reproduce that when testing the component?
For more information about the Grid selection, and the difference between cell and row selection, you can check the following example:
As for the issue related to the `fireEvent.click()` method, could you please provide me with a sample of how this test is used so that I can inspect it further?
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Iron
Rank 1
Iron
Happy to share with you the code that I am using. Can I share it with you in private?
Hi, Ewald,
Yes, this is expected because the `aria-selected` of the td element is used for cell selection, while the `aria-selected` of the tr element is used for the row selection.
For sharing the code, you can send a ticket in the private thread and benefit from 24 hour response time by following the steps below:
- login with your account to telerik.com
- visit this link https://www.telerik.com/account/support-center/contact-us
- choose the technical support option
- after that choose KendoReact as a product and the Grid as the component
- type in a random question, which will show the `Contact Support` button at the bottom of the page
Regards,
Wissam
Progress Telerik