Accessibility - Keyboard control

2 posts, 0 answers
  1. Jan
    Jan avatar
    38 posts
    Member since:
    Apr 2017

    Posted 31 May 2017 Link to this post



    I need to control my sortable list with the keyboard. As far as I know there is no such function implemented in the current sortable widget, right? I just tried the following to extend it by myself, but there is a problem:

    1. Go to the demo:
    2. Add a tabindex="0" to each <li> tag
    3. Add a keydown event to either the ul or the li
      • $(document).on('keydown', '#sortable-basic', function (e) { console.log('1', e); });
      • $(document).on('keydown', '#sortable-basic li', function (e) { console.log('2', e); });
    4. Now focus a li and press a key. You will see that the event is not triggered by any letter or arrow key, but just on ctrl, tab, shift ... In my case I want to sort the items by holding the ALT key + arrow left/right.

    Could you please help me with a working solution?

  2. Stefan
    Stefan avatar
    1595 posts

    Posted 05 Jun 2017 Link to this post

    Hello Jan,

    If the desired result is to have a reorderable list with keyboard navigation, I can suggest using the new ListBox widget which supports it out of the box:

    As for the Sortable widget, I can suggest submitting a feature request in our feedback portal or contact our Professional Services team which is responsible for custom implementations:

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top