navigatable={true} not working in kendo react grid

We are using kendo-react-grid

i noticed same issue in existing example also

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

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

Also, when i click to sort the luminosity is too low. is there a way we can increase that

Also Table header are not associated with the table data.

Hello,

The KendoReact Grid does not have a built-in keyboard navigation logic, as our experience showed us that this can cause different issues. For example, we may make a feature to save on a specific command, but this is not acceptable for each project as this combination can be used for something else. Also, some user base may want to navigate the Grid with a tab and another with arrow keys.

This is why we have made an article that we continuously improve with the most common keyboard navigation cases on how to achieve them:

https://www.telerik.com/kendo-react-ui/components/grid/accessibility/#toc-common-keyboard-navigation-scenarios

As for sort the luminosity, we add the class `k-sorted` and that class can be used to change the luminosity with CSS:

.k-grid .k-sorted {
  background-color: red; // add any needed style to achieve the desired effect
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

As for the accessibility issues, I answered them in the other ticket. Still, I will post the same answer here for visibility:

1)  When focus moves to the table Screen reader do not announce the Table header with the table data. Here screen reader announces as 'Column 3 Commercial Bangalore'.  - I can confirm that this is an issue and we have logged it in our GitHub repository for fixing. The progress can be monitored here:

https://github.com/telerik/kendo-react/issues/564

2) Resizing page up to 400% is creating a loss of content or functionality - This is because the columns do not have fixed width and resize based on the available space, which in this case after 400% becomes smaller. Please check the following example on 400%:

https://stackblitz.com/edit/react-s3gdau?file=app/main.jsx

Also, please have in mind that the official support zoom is 200%:

https://www.boia.org/wcag2/cp/1.4.4

Regards,
Stefan
Progress Telerik