Multi-select spacebar mutiple selection

[Richard]

Our accessibility department flagged our kendo multiselects as being "inaccessible" because "spacebar" is not supported to use as a selector. Multiselect apparently uses "Enter" key to make multiple selections.

I have tried to swap the keycodes during detection but it doesnt seem to work.

Ultimately, we would like to support "spaces" in our input field, but use the spacebar key to make a selection when scrolling through the list.

 

I have tried this code but it doesnt work. Any ideas? Is this possible?

 

//watch for "spacebar" key sequence from user keyboard
multiselectRoot.on("keydown", function (e) {

    if (e.keyCode === 32) { // space bar
        console.log('found spacebar');

        event.preventDefault();
        e.keyCode = 13; //reset to "return key"
        multiselect.trigger(e);

        console.log('event fired');
    }
});

 

Thank you

[Richard]

sorry, it should be

 

e.preventDefault();

[Ivan Danchev]

Hello Richard,

I replied in the support ticket with the same subject you opened, so I'll paste my reply here as well. If you have additional questions on this matter I would suggest we continue the discussion in the support thread in order to avoid thread duplication. 

While selecting an item when Spacebar is pressed can be implemented (see the following dojo for example) this would prevent the user from entering empty spaces in the MultiSelect's input. As you can see when you open the MutliSelect's dropdown the mouse cursor is within the MutliSelect's input and the user can filter the items by entering text. So the expected behavior is the user to be able to enter empty spaces by pressing the Spacebar. At the same time you want to be able to select an item by pressing that key, however the widget cannot tell which of these two actions should be executed at any given time (whether you want to enter an empty space or you want to select an item). Therefore both functionalities cannot be used at the same time if they are triggered by the same key, which is why by design Enter is used for items selection.

Regards,
Ivan Danchev
Progress Telerik

[Richard]

Thank you Ivan! Your dojo helped me find the solution. I had to make some changes for it to work for me, but it works excellent now!

Here is the code I ended up using (for anyone interested):

 

    var multiselectRoot = rootEl.find(".k-widget.k-multiselect");

    //Multi-Region - Key down event
    multiselectRoot.on("keydown", function (e) {
        //watch for "spacebar" key sequence from user keyboard
        if (e.keyCode === 32) { // spacebar event
            if ($("#multiSelector").css("display") === "none") {
                event.preventDefault(); //stop normal execution
                $(".k-state-focused").click(); //force a click on the focus item
            }
        }
    });

 

Thank you for your help. I hope this will pass our accessibility audit now.