Disabling keyboard navigation doesn't take full effect until the chart is re-rendered

[kycutler]

Expected behaviour

I have a grid containing many charts. I want to use roving tab indices to reduce the number of tab actions required to navigate through the grid via keyboard.

I am trying to accomplish this by dynamically updating accessibility.keyboardNavigation.enabled so that only the chart in the active cell is included in the tab order.

The problematic behavior is that updating the setting from true to false should remove all tab stops from the chart but does not.

Actual behaviour

.highcharts-exit-anchor elements are not being removed until the chart re-renders.

After some digging, I discovered that I can partially work around the issue by manually invoking chart.updateA11yEnabled() after updating the option. Currently it seems this is only invoked after the chart is rendered, but since the chart did not require re-rendering in my scenario, it requires a manual invocation. This seems to be an internal method so I would prefer not to depend on it directly. I have noticed it being flaky sometimes as well so would be great to have a fix from Highcharts.

Live demo with steps to reproduce

https://jsfiddle.net/kdzvsg1r/1/

1. Set focus in the input area at the top and tab through the chart normally for reference.
2. Toggle "Disable keyboard navigation"
3. Set focus back into the input area and press tab once
4. Notice that focus is on the "highcharts-exit-anchor" element (e.g. via DevTools) and requires tabbing again to focus the buttons.
5. Now select "Manually Update A11y"
6. Notice that tabbing from the input area now goes directly to the buttons.

Product version

11.1.0

Affected browser(s)

Tested in Edge on Windows

[oysteinmoseng]

@kycutler Thanks for reporting! We should fix this behavior internally, yes.

Just a general note on reducing the number of tab stops (also for other people stumbling upon this issue): Removing elements from the accessibility.keyboardNavigation.order array in the options will give you less tab stops per chart.