linamy
Posts: 3
Joined: Mon Nov 29, 2021 4:12 pm

Focus is on Context button but not actionable

Hi,
Our application was on Highcharts version 6 before and just newly upgraded to version 9. We have a "Skip to Context Menu" link before all the charts.
The purpose is provide accessibility related users a way to avoid tabbing through all the chart pieces before able to export data from the Context menu (export menu). This provided the user a way to jump directly to the export menu.
I have notice our skip to Context menu link is broken in all the charts after the upgrade.

The logic behind the link is find target .highcharts-contextbutton, and put focus on this target. Hitting "Enter" key will open the export menu and proceed to different download options. This worked before.
Now, I observe focus would move to the context button, but export menu would not open when hitting "Enter". I will have to tab again, and then hit "Enter" to open the export menu.

Code: Select all

<div class="highcharts-contextmenu" aria-hidden="true" style="pointer-events: auto; display: none;">
<ul class="highcharts-menu" aria-label="Chart menu" style="list-style: none;">
<li class="highcharts-menu-item" tabindex="-1">Download CSV</li>
<li class="highcharts-menu-item" tabindex="-1">Download XLS</li>
</ul>
</div>
I also tried putting the focus to .highcharts-a11y-proxy-button. This would move focus somewhere with no indication, but tab again would open the export menu as well.

Question is how do I remove this extra tab to open export menu? I also notice aria-hidden='true' is added to the <div>. Not sure if this was there in version 6, but I believe this is preventing the action on "Enter".
I tried putting the focus one level in to ul.highcharts-menu, this also did not work as aria-hidden on the parent node is restricting the access down.
Any help is much appreciated at this point :( .

Thanks,
Amy
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Focus is on Context button but not actionable

Hi,

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

I'm not sure if I understand correctly your issue. I've tested key navigation at the following demo, and the context menu is opening correctly.

Demo
https://jsfiddle.net/BlackLabel/5tr3Lom9/

Could you reproduce the issue in an online editor that I could work on?

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
linamy
Posts: 3
Joined: Mon Nov 29, 2021 4:12 pm

Re: Focus is on Context button but not actionable

Hi Magdalena,

Thanks for replying back.

https://jsfiddle.net/1457omj2/6/ I have reproduce the issue in this fiddler.
Using mouse click is not obvious. Please use the keyboard navigation to keypress on the Skip to export menu link. You would see focus is on the 3 bar menu icon. But, pressing Enter does nothing. If I tab again, it goes to the series, and then back to the menu.
Thank you.

-Amy
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Focus is on Context button but not actionable

Hi,

Thank you for the demo! Now it's clear!

You should add your button using customComponents.

API Reference:
https://api.highcharts.com/highcharts/a ... Components

I'm also wondering if this button is necessary for your project. You can just change the order of keyboard navigation from the API:

API Reference:
https://api.highcharts.com/highcharts/a ... tion.order

Demo:
https://jsfiddle.net/BlackLabel/yce6k3u7/

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
linamy
Posts: 3
Joined: Mon Nov 29, 2021 4:12 pm

Re: Focus is on Context button but not actionable

Hi,

Sorry about the late reply. Thank you so much for the options, your help is much appreciated!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Focus is on Context button but not actionable

You're welcome! In case of any further questions, feel free to contact us again.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”