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