photosjob
Posts: 2
Joined: Fri Feb 23, 2024 9:16 am

Custom export multiple buttons keyboard focus issue

Hi,

For a project I added a second button in the exporting block (with examples found here on this forum).
In the frontend this shows fine and works as expected when I click one of those buttons. But when using the tab-key to navigate both buttons get focussed at the same time (one outline surrounding both buttons and by pressing Enter to activate the action of the first button gets executed).

Any help on how to get both buttons in keyboard focus would be greatly appreciated
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Custom export multiple buttons keyboard focus issue

Hi!

Welcome to our forum and thanks for reaching out to us with your question!

Could you please provide a minimal reproducible demo, so that I can investigate this problem further? You can start by editing this example: https://jsfiddle.net/BlackLabel/h8xs703r/.

Patiently waiting for your reply.
Best regards!
Jędrzej Ruta
Highcharts Developer
photosjob
Posts: 2
Joined: Fri Feb 23, 2024 9:16 am

Re: Custom export multiple buttons keyboard focus issue

I made a custom setup with the multiple buttons: https://jsfiddle.net/L7toc1pf/1/

When using the mouse it works (in this example first to buttons won't work because the actions aren't valid in this surrounding, but are valid in the application where this is used), but when using keyboard navigation all three buttons get hightlighted as one single item and there is no way to use the keyboard navigation to get to the individual buttons.

Does anyone know how to solve this? Any help would be greatly appreciated
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Custom export multiple buttons keyboard focus issue

Thanks for providing the demo and elaborating on the issue.

First of all, I'd advise to use the Highcharts Accessibility module, as it provides a built-in support for keyboard navigation (among other accessibility features). When it comes to adding custom buttons into the exporting group, it seems that Highcharts takes the original button aka chart menu as the primary button and doesn't allow to focus onto other buttons inside this group.

As a workaround, I'd recommend to create them outside of chart.exporting object, and then add them as custom Accessibility components. For reference, please take a look at this thread: https://www.highcharts.com/forum/viewtopic.php?t=47886.

Let me know if that was helpful for you.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”