randerson
Posts: 14
Joined: Tue Apr 05, 2022 7:49 pm

How to allow keyboard navigation onto x axis labels?

Hi,

We have implemented the highcharts react into our project; we love the built in accessibility of the charts! However, we have a need in one of our charts to allow user's to click on the x-axis labels (thus triggering an onclick event). We've figured out all of the event logic, etc, but we also need these x-axis labels to be navigable and selectable all with a keyboard. We've got the keyboard navigation working by using the highcharts accessibility module to allow users to navigate through the series points and legend items. The final part we need is to allow them to get to the x-axis labels via keyboard.

Here is a simplified example of what we're looking to do (note: our project is done in React, not jQuery like this example I found):

http://jsfiddle.net/obds84na/2/

Our x-axis labels are generated via formatter function just as that example demo does. It's not clear to me how we are able to navigate to the x-axis labels here in that demo with a keyboard. None of the options jumps out as being the reason it is possible in that demo, hence, I'm not sure what settings we need to use. I've tried setting the keyboardNavigation.order but, there doesn't seem to be any "axis" elements to use in the order array.

Any guidance you can provide on this is appreciated!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to allow keyboard navigation onto x axis labels?

Hi,

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

I've passed your question to our accessibility expert to provide you with the best solution. I'll be back with an answer as soon as possible.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
randerson
Posts: 14
Joined: Tue Apr 05, 2022 7:49 pm

Re: How to allow keyboard navigation onto x axis labels?

Thank you, Magdalena! We eagerly await what you find :)
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to allow keyboard navigation onto x axis labels?

Hi randerson,

For now, we can't simply add xAxis.labels to the navigation order like other components. The most stable approach to achieve that will be to add new elements using the ProxyProvider. Here is an example demo with a starting point:

Demo:
http://jsfiddle.net/bhz0drj3/.

The focus outline needs to be refined but keyboard navigation works correctly.

​If you have further inquiries, you may reach out to me at any time,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
randerson
Posts: 14
Joined: Tue Apr 05, 2022 7:49 pm

Re: How to allow keyboard navigation onto x axis labels?

Hi magdalena,

Thank you for this! Seeing as we are developing in react, not jquery, would you be able to convert this solution into a react solution?

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

Re: How to allow keyboard navigation onto x axis labels?

Hi randerson,

Please find attached the following demo of react example :

Demo:
https://codesandbox.io/s/highcharts-rea ... ked-ls4z8f

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
randerson
Posts: 14
Joined: Tue Apr 05, 2022 7:49 pm

Re: How to allow keyboard navigation onto x axis labels?

Hi magdalena,

Thank you for this solution! We've implemented it into our solution with success. We do have two new issues that have arisen from this:

Updated sandbox using hooks, and custom x axis label checks similar to our code: https://codesandbox.io/s/highcharts-rea ... ponent.jsx

In our implementation, we get data for charts via api call and pass data down to chart component via props.data. We've noticed that on initial render of the chart component, 'this.value' for the x axis labels is null until the data is returned and passed down to the chart component (using useEffect/useCallback hooks). For the chart, we have some check in the xAxis label formatter for one of the x axis, to check if 'this.value' is not null. If 'this.value' is not null, we display the x axis link as normal. If it is null, we display the x axis link as disabled (aria-disabled=true, and custom className="disabled" with css styling). Therefore, the axis label initially shows up as disabled, due to it being null on initial render. Typically, once the data is returned and passed down to the chart, the chart rerenders and the axis labels are updated to show as active (i.e. as normal). The api call is very quick so, you normally never see the initial render of the chart with nulls/disabled labels.

1.) On some occasions, however, the chart will rerender with the data but, the axis category label 'this.value' still holds a value of null, even though in the data a non-null value actually exists for the category. This is causing the labels to remain rendered as disabled still, even though they should be active. Once we do something to trigger another rerender of the chart (i.e. resize window, close/reopen the component that the chart is inside, etc.), the chart will update and show the correct active labels. We can't expect users to perform some action to get the chart to rerender, however, and so we need labels to show correctly every time. I've tried using the useState hook for the chart options, and updating them using the useEffect hook based on changes to the data; still the issue arises occasionally.
In the sandbox example I've linked above, I've modified your example to match a similar style to how we are rendering charts and included a simple 'this.value' comparison for one of the x axis category labels. However, the issue does not happen in the sandbox and thus is hard for me to provide a live example for you. Are you aware of this problem of stale axis label values and/or of any fix for this?

2.) For accessibility reasons, when these axis labels are disabled, we need to deactivate the ability to keyboard navigate to them. We should still be able to keyboard navigate to the other axis labels that are active, but just skip over the disabled ones. If all labels are disabled, then deactivate keyboard navigation to the axis entirely. Are you able to provide a solution that includes this functionality?


Thanks for the help, and please let me know if I can clarify anything. I know this is a very nuanced issue :)
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to allow keyboard navigation onto x axis labels?

Hello,

Answering questions:
1. If the problem does not appear in the sandbox, then the problem is yours, are you using the same version of Highcharts as in the demo?
2. You can set xAxis.labels.enabled to false to deactivate keyboard navigation for that axis.

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
randerson
Posts: 14
Joined: Tue Apr 05, 2022 7:49 pm

Re: How to allow keyboard navigation onto x axis labels?

Hi, thanks for your response!

1. We are on the same Highcharts version (10.1.0) but our highcharts-react-official is 3.1.0 whereas the demo is 3.0.0. I can't recreate the problem in sandbox because I can't simulate our api call to get data before it is passed down via props to the chart component. It seems maybe this problem tends to occur when the chart finishes rendering before the data has returned from api call and passed down to chart. Even though we use useEffect hook with props.data dependency (category values are in props.data objects), the chart doesn't seem to recognize the new state of data and rerender the new category values. It seems everything else in chart gets updated correctly when data changes but, not category values. It may be something in our logic, but wanted to confirm if your team has seen anything like this before with the charts and could provide some insight if so.

2. That sounds like a good option. I'll attempt to implement that if we can get the links to consistently be disabled (as per point 1 here).

Thanks!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How to allow keyboard navigation onto x axis labels?

Hi,

So maybe one of the solutions would be to initiate the chart only after receiving the data from the API?
Then you would also prevent unnecessary rendering.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”