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.
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