[Bug] Legend Item Buttons Not Keyboard Accessible (SVG Chart)
- 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
Assessment
This issue has not been assessed yet.