Conversational UI Keyboard Navigation

[Minh]

According to https://www.telerik.com/kendo-react-ui/components/conversationalui/keyboard-navigation/ I should be able to use the keyboard to select suggested actions, but I can see in the DOM that they all have `tabindex="-1"` which makes them not focusable.

[Stefan]

Hello, Minh,

This is expected as in order for us to control the focus programmatically we need to restrict the default behavior.

Still, I see that in our demo the navigation is working, but the visual indication is missing. I have logged this for fixing:

https://github.com/telerik/kendo-react/issues/928

Currently, there is no workaround available, if one is found it will be added to the issue.

Additionally, I have added Telerik points to your account for bringing this to our attention.

Apologies for the inconvenience this may have caused you.

Regards,
Stefan
Progress Telerik

[Minh]

Thanks for your reply Stefan, but I'm afraid I can't select items at all. To make sure I wasn't dealing with focus traps etc. I opened it in StackBlitz like so:

- Edit in StackBlitz
- Open in New Window
- I then tried using `Tab` as well as arrow keys and `Enter` but I'm unable to select any of the suggested items

[Stefan]

They are not visually focused and it is hard to see.

This is what I tried:

1) Click over A sample message - It gets visually selected.

2) Press arrow down

3) Press arrow left

4) Press arrow left

5) Press Enter - Place a call action will be executed showing that the arrow moved over the items correctly, but not visually.

[Minh]

Oh I see! I can reproduce it now. The main difference is step 1 - I tried to avoid using my mouse entirely and test that keyboard navigation works, and that's why I was unable to. So it's possible that there's two issues here: visual indication as well as the ability to only use the keyboard without relying on mouse clicks.

[Stefan]

We will look into both.

We should add a key that initially focuses the message area.