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