We are using Highcharts and the official Highcharts React wrapper. We've previously added the Export and ExportData modules in order to display the chart data in tabular format. We display the data table by default. This all works very well without the Accessibility module.
Upon adding the Accessibility module, the data table steals the page focus upon chart load and anytime the data table is newly displayed.
Our process of displaying charts is:
- User selects which chart they want to view via a drop-down menu
- We display a loading state while we fetch API data, hiding the chart and data table
- API data comes in, we format it as needed for the Highcharts configuration
- We remove the loading state and display the chart & data table
- Result: The page jumps to the bottom, where the data table is displayed, with the table showing a blue focus border
Is there a way we can prevent this behavior? I have not found any setting related to this or documentation that this behavior is expected.
I've reviewed various support forums, searched google, reviewed the Accessibility module's API documentation, (briefly) searched through the source code. I've also attempted to use JS to shift the page focus back to the chart via document.getElementById('element).focus() but have not been able to take back control of the page focus from Highcharts Accessibility.
We would really like to include the Accessibility module to provide the most inclusive experience possible but cannot do so at the expense of a reasonable default user experience.
Thank you for a fantastic product!
Any guidance on this would be very much appreciated.