Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Supporting keyboard interactivity with VictoryVoronoiContainer #2801

Open
2 tasks done
sparklerfish opened this issue Feb 12, 2024 · 3 comments
Open
2 tasks done

Supporting keyboard interactivity with VictoryVoronoiContainer #2801

sparklerfish opened this issue Feb 12, 2024 · 3 comments
Labels
Issue: Accepted The submitted issue has been confirmed by the Victory core team Type: Enhancement ✏️ An enhancement or feature proposal that will be addressed after the next release

Comments

@sparklerfish
Copy link

sparklerfish commented Feb 12, 2024

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • I agree to follow this project's Code of Conduct

Question

I am using VictoryVoronoiContainer to display tooltips for a stacked area chart. The labels are defined on the container component, using a VictoryTooltip as the labelComponent. I'd also like to be able to activate the tooltips via the keyboard, so I've added a transparent stacked VictoryScatter with a tabindex={0} on each of the points.

I can reliably capture onFocus/onBlur events on the scatter to know which data point was focused via the keyboard, but I can't figure out how to activate the labels on the container. I'm storing the focused point in the component's local state, which I've tried passing as a prop to to the tooltip, but the tooltip never seems aware of it, and I can't find a way to programmatically activate it with the event. I've tried setting the event both on the scatters themselves and on the chart parent.

How can I activate a voronoi tooltip from a keyboard event? Is this possible?

@sparklerfish sparklerfish added the Type: Question ❔ Asking a question or asking for help label Feb 12, 2024
@carbonrobot
Copy link
Contributor

Hi @sparklerfish, I can't think of any documented feature that would help you here. Is it possible to create a small demo using our codesandbox of what you are trying to achieve?

https://codesandbox.io/p/sandbox/victory-starter-dj4f7t?file=%2Fsrc%2FApp.tsx%3A8%2C5

@carbonrobot carbonrobot added the Status: Needs More Info ✋ A question or report that needs more info to be addressable label Feb 22, 2024
Copy link
Contributor

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

@github-actions github-actions bot added the Issue: Stale This issue is marked as stale and will close in 14 days label May 23, 2024
@sparklerfish
Copy link
Author

@carbonrobot sorry for the delay, I've set up a sort-of simplified version of what I'm working on here:
https://codesandbox.io/p/sandbox/victory-starter-forked-ztfqq9?file=%2Fsrc%2FApp.tsx%3A36%2C60

In order to make it keyboard-accessible, there's an invisible scatter chart with tabbable tooltips. However, rather than having separate tooltips for the scatter points, I'd like to find a way to instead have the keyboard focus activate the area chart's "grouped" voronoi tooltip that displays on mouseover.

@github-actions github-actions bot removed the Issue: Stale This issue is marked as stale and will close in 14 days label May 24, 2024
@carbonrobot carbonrobot added Type: Enhancement ✏️ An enhancement or feature proposal that will be addressed after the next release Issue: Accepted The submitted issue has been confirmed by the Victory core team and removed Status: Needs More Info ✋ A question or report that needs more info to be addressable Type: Question ❔ Asking a question or asking for help labels Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Issue: Accepted The submitted issue has been confirmed by the Victory core team Type: Enhancement ✏️ An enhancement or feature proposal that will be addressed after the next release
Projects
None yet
Development

No branches or pull requests

2 participants