Few accessibility issues in kendo react grid

[A]

Hi Team,

 

I have 2 different issue in kendo react grid

1. 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' 

 

2.

Resizing page up to 400% is creating a loss of content or functionality

 

 

 

Actual Result:

Page content is not properly visible after resizing page to 400%.

Agent Extension page content is not properly visible after resizing page to 400%.

Expected Result:

Resizing page “Agent Extension” up to 400% should not create a loss of content or functionality.

 

[A]

 

fyi - 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/

[Stefan]

Hello,

Thank you for reporting these.

Regarding the issues:

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

Also, I see that the trial of the product has expired, would you like our sales team to extend it if you are still in the evaluation process?

Regards,
Stefan
Progress Telerik