apache / apache/echarts

[Bug] Legend Item Buttons Not Keyboard Accessible (SVG Chart)

Open
#21,022 12 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.6.0

### Link to Minimal Reproduction

https://codepen.io/meganthomas/pen/YPXEOgX

### Steps to Reproduce

1. Load the SVG chart.
2. Turn on a screen reader.
3. Attempt to use all the same functionality via keyboard that you would use via mouse. For example, clicking on one of the legend items, such as "Email" in the codepen, to remove it from the chart.

### Current Behavior

1. I can't navigate to the legend items via keyboard. I can't toggle the legend items on/off with a keyboard.

### Expected Behavior

1. I should be able to navigate to the legend items via keyboard. They should be button elements with a name, role, and value.
2. Any other parts of the chart that are clickable by mouse should also be activable by keyboard.

### Environment

```markdown
- OS: macOS Sequoia
- Browser: Chrome 137.0.7151.69
- Screen Reader: VoiceOver
```

### Any additional comments?

Accessibility Information from Deque: [How to make interactive charts accessible](https://www.deque.com/blog/how-to-make-interactive-charts-accessible/)

- anything a mouse user can do (activate buttons, toggle on and off parts of charts) must be accessible by keyboard as well
- all buttons must have a name and role. Buttons with selected states must also have a value.
- what is visually seen but be read by a screen reader - either as is or in another format like a table
- ensure all color contrast requirements are met
- avoid using color alone to convey information

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.