[Accessibility] Chart series toggles are not accessible via keyboard controls. - Githubissues

telerik / kendo-ui-core

An HTML5, jQuery-based widget library for building modern web apps.

http://www.telerik.com/kendo-ui

Other

2.54k stars 1.91k forks source link

[Accessibility] Chart series toggles are not accessible via keyboard controls. #6817

Closed VeronikaFranc closed 2 years ago

VeronikaFranc commented 2 years ago

Bug report

For the Kendo UI chart to meet WCAG2 accessibility standards, chart functionality needs to be accessible via the keyboard.

Reproduction of the problem

Go to https://demos.telerik.com/kendo-ui/bar-charts/column
Attempt to access data series toggles via the TAB key.
Observe that data series toggles are not accessible via keyboard navigation.

Current behavior

Data series toggles are not accessible via the keyboard, and there is no functionality to enable keyboard navigation.

The generated HTML looks like so:

<g transform="matrix(1,0,0,1,282,53)">
    ...
</g>

Expected/desired behavior

The relevant g html tags should have the attribute tabindex="0"
The relevant g html tags should have appropriate aria-label and aria-role attributes.
Hitting the ENTER key should toggle the data series on and off.

<g transform="matrix(1,0,0,1,282,53)" tabindex="0" aria-label="India" aria-role="button">
    ...
</g>

Environment

Kendo UI version: 2022.1.412
jQuery version: 1.12.4
Browser: [Chrome XX Version 100.0.4896.127 (Official Build) (64-bit)]

MilenaCh commented 2 years ago

Chart doesn't have built-in navigation functionality, however there is a help article, which demonstrates how to accomplish Chart navigation with a custom code. In addition, you can add an item for built-in keyboard navigation in our feedback portal.