Highcharts keyboardNavigation focusBorder issue

[kumarv]

Hi Team,

The project which i'm working on loads Highchart in Jquery UI dialogs. Recently we started using accessibility module of highchart and started to see weird behavior. We see rectangle highlights for the first tabbable item in chart getting highlighted even when it was not accessed via keyboard. This is happening when dialog is hidden and re-opened again. Since the dialog has the default functionality of putting back focus on first tabbale item, this causes the focus border to get applied to all the dialogs where charts are hidden and re-opened back.

Created a JSfiddle http://jsfiddle.net/fj1qudg0/ for the same, You can see when chart is loaded initially in dialog there are no focus border displayed, whereas when dialog is hidden and displayed again then there is a black border for the first tabbable element of chart, as per Jquery UI dialog.

Snippet from Jquery UI website
========================================================================================
Focus
Upon opening a dialog, focus is automatically moved to the first item that matches the following:

The first element within the dialog with the autofocus attribute
The first :tabbable element within the dialog's content
The first :tabbable element within the dialog's buttonpane
The dialog's close button
The dialog itself

========================================================================================

Is there any way to hide the focus border when there is no keyboard accessed point on chart.

http://jsfiddle.net/fj1qudg0/

[kumarv]

JSfiddle updated - http://jsfiddle.net/fj1qudg0/2/

[michal.f]

Hello and welcome to our forum.

First of all, sorry for the long response time.

Yes, this is a strange behavior of the graph and it seems to me that it is a bug, at the moment it is difficult for me to say whether it is related to the use of accessibility with Jquery or is it a problem that could be reproduced without this library but it's best if you report it on GitHub: https://github.com/highcharts/highchart ... new/choose

As a workaround, you can enable keyboardNavigation when opening this window.
Demo: http://jsfiddle.net/BlackLabel/8wmvo19e/

Best regards!