Telerik Forums / KendoReact

Conversational UI Keyboard Navigation

1 Answer 88 Views
Accessibility Conversational UI 
Minh
Top achievements
Rank 1
Minh asked on 13 May 2021, 10:18 AM
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.

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 13 May 2021, 12:24 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Minh
Top achievements
Rank 1
commented on 13 May 2021, 12:29 PM

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
Telerik team
commented on 13 May 2021, 12:37 PM

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
Top achievements
Rank 1
commented on 13 May 2021, 01:11 PM

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
Telerik team
commented on 14 May 2021, 04:46 AM

We will look into both.

We should add a key that initially focuses the message area.
Tags
Accessibility Conversational UI 
Asked by
Minh
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or