TabIndex for paging control

2 posts, 0 answers
  1. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 23 Dec 2014 Link to this post

    Shift+Tab fails to work in paging control : here is the scenario
    - tab on to the paging dropdown icon
    - hit <space>
    Expected Result : dropdown opens
    Actual Result : dropdown opens
    - hit <Shift+tab >
    Expected Result : tab focus to go on dropdown icon
    Actual Result : focus goes out of grid and goes to next item outside grid

    Showing example attached - in the second screen, the focus goes to a link "Trademarks" in the bottom

    Also, the same happens with "filter icon" - but this can be won by an argument to close the dropdown by hitting <Esc> so that the focus gets back to filter icon BUT in the paging control case, the <esc> doesn't work to close the paging dropdown !!!!

    Any fix or workaround ?

  2. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 25 Dec 2014 Link to this post

    Hi Madzie,

    Normally, the Kendo UI DropDownList icon cannot be focused, and the dropdown itself opens with Alt + Down Arrow, when the widget is focused. If you are opening it with Space, you have probably made some special customizations.

    In addition, when the DropDownList is open and you hit Shift + Tab or Escape, the dropdown should close and the focus should remain on the DropDownList widget.

    You can verify all of the above on the following demo:

    http://demos.telerik.com/aspnet-mvc/grid/index

    By design, a lot of Grid elements have a negative tabindex or an unselectable HTML attribute, which prevent them from being focused during tabbing. If you want to use keyboard navigation with the Grid, then enable the .Navigatable() option and follow the instructions in the following demo:

    http://demos.telerik.com/aspnet-mvc/grid/keyboard-navigation

    Regards,
    Dimo
    Telerik

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top