navigatable={true} not working in kendo react grid

[A]

Hi Team,

Navigatable={true} not working in kendo react grid

also i am unable to find navigation  of react kendo documentation

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

 

Is there a way i can implenment navigatable = {true} in react kendo grid

[A]

 

Actual Result:

 

Keyboard focus indicator is not visible on table column headers element “Customer Segment” when navigating the column header using the tab key.

 

 

 

Expected Result:

 

Keyboard focus indicator(s) should be clearly visible on element “Customer Segment” when navigating the column header using the tab key.

[A]

We are using kendo-react-grid

[A]

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/

[A]

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

 

[A]

Also Table header are not associated with the table data.

Actual Result:

When focus moves to the table Screen reader does not announce the Table header with the table data.Here screen reader announce as 'Column 3 Commercial Bangalore'. 

Observation :

1. Here when focus lands on the table NVDA does not announce the information of the rows and column.

2. NVDA does not announce information for empty cell of table as blank when  while navigating using table short cut keys(Ctrl+Alt+Arrows).

Expected Result:

 

When focus moves to the table Screen reader should announce the Table header with the table data.

Ex:Here screen reader should  announces as 'Column 3 Commercial Bangalore Line of  business button' 

 

 

 

[Stefan]

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