hc-user-84898
Posts: 5
Joined: Tue Aug 09, 2022 4:53 pm

Accessibility Module - Data table steals focus

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.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Accessibility Module - Data table steals focus

Hi there,

Welcome to our forum!

Thank you for such a detailed explanation of your problem. It will be hard to guide you in a right direction without looking at your code, so could you please reproduce your issue in an online editor with React?

You can start here: https://codesandbox.io/s/highcharts-rea ... ked-ebwzp3

Once you got that ready, feel free to contact us in this thread,
Best regards!
Kamil Musiałowski
Highcharts Developer
hc-user-84898
Posts: 5
Joined: Tue Aug 09, 2022 4:53 pm

Re: Accessibility Module - Data table steals focus

Thanks for the starting point, Kamil!

I've recreated the issue. Please use an incognito browser to view the page, as it seems codesandbox sessions can interfere with one another.
https://codesandbox.io/s/highcharts-rea ... ked-4relk1

As described, when the chart loads there is a jump to the bottom of the page to focus on the data table.

By commenting out the application of the Accessibility module, and reloading the codesandbox browser, this focus shift does not occur.

Would appreciate any guidance on how to mitigate this behavior.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Accessibility Module - Data table steals focus

Hello,

Thank you for creating a demo, now it clear to me what is the problem.

Please take a look at the demo below, where I have overwritten the function responsible for focusing the table at the page load (lines 14-18).
DEMO: https://codesandbox.io/s/highcharts-rea ... =/index.js

Let me know if that has solved your issue,
Best regards!
Kamil Musiałowski
Highcharts Developer
hc-user-84898
Posts: 5
Joined: Tue Aug 09, 2022 4:53 pm

Re: Accessibility Module - Data table steals focus

Thank you very much for this workaround! This does resolve our issue with page shift, so I really appreciate the quick resolution on this.

I guess the next logical question is: Does preventing this focus action have any negative impact on the accessibility? For example, would this change prevent a screen reader or other assistive device from correctly/easily communicating the newly displayed information?
hc-user-84898
Posts: 5
Joined: Tue Aug 09, 2022 4:53 pm

Re: Accessibility Module - Data table steals focus

re: Does preventing this focus action have any negative impact on the accessibility?

Now that we've disabled the auto focus on the data table, I notice that I'm no longer able to focus on the data table via the keyboard. I'm testing accessibility on OSX with Voice Over, and this lack of focus means that I can't get the screen reader to announce any information about the data table.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Accessibility Module - Data table steals focus

Hi there,

This workaround should not have any impact on the accessibility, screen readers, keyboard navigation etc. as it only disables the initial table focus on the page load.

You can still access the table via keyboard. Please take a look at the link below and follow the instruction:
https://jsfiddle.net/BlackLabel/bwe13jcm/show

Press "play" to enter the demo.
Hit TAB key twice to get the "Series" highlighted.
Hit control + option + right arrow around 8 times to get to the table. Once it's highlighted you can navigate around it.
Untitled.gif
Untitled.gif (169.31 KiB) Viewed 414 times
Let me know if you've managed to reproduce it,
Regards!
Kamil Musiałowski
Highcharts Developer
hc-user-84898
Posts: 5
Joined: Tue Aug 09, 2022 4:53 pm

Re: Accessibility Module - Data table steals focus

I did not realize there was a special key combination for navigation with Voice Over, I was relying on simply hitting `Tab`.

You've been incredibly helpful, thank you very much for your guidance and assistance!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Accessibility Module - Data table steals focus

Yes, there is much more to that than just a Tab key, but I'm glad that it's working for you now!

Thank you for your kind words! Please do not hesitate to contact us with any further requests,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”