0

I am trying to make the chart keyboard accessible, and need a way to trigger the "select" event on a keypress.

<ngx-charts-advanced-pie-chart>
   (select)="onSelect($event)"
   ...
</ngx-charts-advanced-pie-chart>

I have a function call when there is a click that is handled by the (select) output. I need to do a similar thing for the enter key, something like (keydown.enter)="onSelect($event)". The problem is that the $event passed from the (keydown.enter) action is different from the (select) one. It has a bunch of DOM-related elements, whereas the (select) event has a nicely formatted name and value of the object that was clicked which is what I need.

Is there a way to trigger the (select) output from a key press? Or is there a way to get the same $event that is passed from the (select) output? Either way would work for me.

Kevin
  • 3
  • 1

1 Answers1

0

Since the (select) event is triggered on a mouse click and you want it triggered on a keyboard press, it is by definition not possible. You've mentioned that you are trying to make the chart keyboard-accessible. If you have the basic navigation ready then perhaps you can leverage that to listen to (activate) and get the data from there.

I should warn you, though, that there are some open bugs with ngx-charts for keyboard navigation. So implementing even basic navigation could prove to be harder than usual.

https://github.com/swimlane/ngx-charts/issues/1329
https://github.com/swimlane/ngx-charts/issues/107

sam
  • 125
  • 1
  • 11