Completed
Last Updated: 18 Dec 2020 09:02 by ADMIN
Release 2021.R1
Senura D
Created on: 14 May 2020 07:58
Category: ScrollView
Type: Feature Request
1
Key navigation in Kendo ScrollView?

According to this link (KendoUI for Angular) it says "Once the component is focused, the user can navigate with the Left Arrow and Right Arrow keys".

And you can see that it works as stated above in this example KendoUI for Angular ScrollView.

 

However, KendoUI for jQuery ScrollView does not seem to have this left and right key navigation option. Is it actually not supported in KendoUI for jQuery ScrollView? How can I add the support for the left and right arrow keys in this scenario?

 

Thanks.

4 comments
ADMIN
Alex Hajigeorgieva
Posted on: 25 May 2020 12:35

Hi, Senura,

The Kendo Angular ScrollView has a tabindex="1" which allows you to focus the component initially with the Tab key, however as you quoted - navigation is conducted by using the arrow keys, not the Tab key.

Once the component is focused, the user can navigate with the Left Arrow and Right Arrow keys".

I added the tabindex and a style so you can see that it focuses:

http://runner.telerik.io/fullscreen/EYuVAlUw/5

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Senura D
Posted on: 19 May 2020 03:39

Hi Alex,

I have already handled the left and right key events to make this ScrollView to respond to the left and right arrow key press. However, when it comes to the TAB key press to focus on each element inside each page in ScrollView, it messes up. Thus, navigating the content through TAB key just breaks up the UI (In certaing cases, It focuses on the next page element and the UI breaks as the KendoUI does not move to next page in the ScrollView).

Thanks,

Senura D.

ADMIN
Alex Hajigeorgieva
Posted on: 18 May 2020 08:00

Hello, Senura,

The jQuery Kendo UI ScrollView does not feature keyboard navigation, however it does have a prev() and next() methods so you could capture the keydown events corresponding to the left and right arrows:

https://runner.telerik.io/fullscreen/@bubblemaster/INUlAREY

$(document).keydown(function(e){
          var scrollview = $("#scrollView").data("kendoScrollView");

          if (e.which == 37) { // left
            scrollview.prev();
          }
          if (e.which == 39) { // right
            scrollview.next();
          }
          e.preventDefault();
        });

Since this is not yet an implemented feature, I have transferred it to the Feedback Portal so others can vote for it and increase its chance to become a built-in behaviour.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Senura D
Posted on: 14 May 2020 17:32
Is this actually a bug (It works in KendoUI for Angular but not in jQuery)? This has AAA compliance in WCAG 2.1