Tab key navigation in custom keyboard.

[PratsBhatt]

This is an issue that I am currently facing. I have a custom keyboard and that work pretty fine.

But the issue is that if I want to select a key, I have to click it. I want the keyboard to navigate using tab and select any key using the enter or tab key.

I managed to do somehow navigation using tab key (using jQuery- I am not sure if there is anything that supports in keyboard pacakge)

But the current problem is that I am unable to select the key using the enter key.

Any help will be very much appreciated.

[Mottie]

Hi @PratsBhatt!

The main issue is that the Tab key moves the focus by design. Whereas this virtual keyboard was build to always redirect focus back to the input (because clicking moves it). That and all the keyboard buttons have a tabindex="-1" set on them. So this keyboard isn't optimized for accessibility - I took over maintaining this work way before I knew anything about accessibility.

Given the above information, there is an alternative. The navigation extension makes the keyboard behave like the virtual keyboards you find on TVs. I hope that will suit your needs?

[PratsBhatt]

@Mottie Thank you for your quick reply. I was able to change the tabindex="0" and so I was able to navigate, but the main issue that I am currently having is that I am trying to press enter or space key and I am expecting that it will fire the onClick event. But the enter or space key does not select a key. I event tried to fire click event like this:

jQuery(".ui-keyboard-keyset button").first().trigger("click");

But still I was unable to select the key using the enter or space key iteself instead of mouse click.

Could you direct me if that is even possible with this library?

[Mottie]

It should be possible. Try using mouseup instead of click. But, I still think the method you're describing will make the keyboard difficult to use for some users.