Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 18 Dec 2020 17:25 by ADMIN
Release 2021.R1
Seuthes
Created on: 27 Apr 2020 11:19
Category: Drawer
Type: Feature Request
2
Drawer cannot be tabbed with the keyboard
You cannot tab through the kendo drawer items with the keyboard. It is also not accessbile. This is crucial and should be added asap. 
1 comment
ADMIN
Alex Hajigeorgieva
Posted on: 04 May 2020 10:59

Hello,

Thank you very much for the suggestion.

I agree with you that keyboard navigation would be an excellent addition to the drawer. While this feature request gains popularity, you can use some standard JavaScript techniques to implement it yourself:

  • add a tabindex to the items 
  • listen for the tab key to change the highlighting ("k-state-focused" kendo class)
  • listen for the enter key to change the selected class and open the drawer item  ("k-state-selected" kendo class)

       $(document.body).keydown(function(e) {
          if (e.altKey && e.keyCode == 87) {
            $("#drawer").focus();
          } 
        });

        $(document.body).keyup(function(e) {
          if(e.keyCode == 9){
            $(".k-state-focused").removeClass("k-state-focused");
            $(e.target).addClass("k-state-focused");
          }
        });

        $("[data-role='drawer-item']").attr("tabindex",0).keydown(function(e){
          if(e.keyCode == 13){
            drawer.drawerContainer.find("#drawer-content > div").addClass("hidden");
              drawer.drawerContainer.find("#drawer-content").find("#" + $(e.target).find(".k-item-text").text()).removeClass("hidden");
             $(".k-state-selected").removeClass("k-state-selected");
             $(e.target).addClass("k-state-selected");
          }
        });

Here is a sample implementation for your reference:

https://dojo.telerik.com/@bubblemaster/AWaHONUs/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.
Create an account Log In
View
Type
Status
Category