Keyboard navigation issue using tab

Hi,

We are using version 6.1.2. for Kanban. We are trying the keyboard navigation. For the first time, using tab, a card is selected and then on next tab, next list herder is selected. Next tab, a card in the next list is selected. This works until we completed traversing all the lists in the Kanban. Continue pressing tab and next time a header of first list is selected. After that, on subsequent tab press, the headers of next lane are selected. But the cards in the lane are not selected.

This is reproducible on sample as well.
https://docs.webix.com/samples/63_kanban/01_basic/04_templates.html

Any idea how can we achieve it?

Hello @pravingorad,

For the first time, using tab, a card is selected and then on next tab, next list herder is selected. Next tab, a card in the next list is selected. This works until we completed traversing all the lists in the Kanban. Continue pressing tab and next time a header of first list is selected. After that, on subsequent tab press, the headers of next lane are selected. But the cards in the lane are not selected.

Actually, the described tab logic is partially handled by the browser itself, and is not really being controlled by our own tab logic fully (which is universal across every component either way). The focus that shifts towards the headers within the kanban is the native browser logic, the focus that is being set afterwards is the one that is being set by our own tab logic within the library (this is why you see two “focused” elements at the same time). This is not really intentional, and, as I have previously mentioned, the tab logic is universal for every widget, so it is not something that is handled directly at the moment (in regards to specific widgets, i.e. kanban). With that said, it is still possible to provide your own custom tab logic and account for this behaviour.

Any idea how can we achieve it?

As mentioned above, you can provide your own tab logic that would be separate from the global tab logic and would only work within the Kanban widget (in your case). This can be done by adding a global hotkey handler, done with the help of the addHotKey() method.

Please take a look at the following example: Code Snippet.

Notably, the overall logic is somewhat confusing, since we need to manage double focus at the same time, and we cannot rely on standard helpers to determine the focused/to-be-focused elements. There might be a better way to handle the logic, but, considering you would need to handle 2 focused elements at the same time, the code would still be fairly hard to read, as far as I can see.