Keyboard Accessibility

[stack-its]

I'm trying to improve Accessibility with MagicSuggest. I can now tab to the dropdown target (.ms-trigger) and hit Space/Return to reveal the loaded items (.ms-sel-item) & the input. I then add tabindex=0 to each .ms-sel-item & the input.

I would like to put focus on the first item and then let the user tab through the items and also need to create a way they can select the close button for each item using Space/Return. Thanks for your guidance.

[zergioz]

Clone the repo and open a PR to help out.

[stack-its]

@zergioz Ok, I've got almost everything working, but I need a small favor. I need to support keyboard Shift+Tab when a user is in the input box & that key combination would set the first .ms-sel-item to be active.

I just need help in getting the last line to work:

if (KEYCODES.SHIFT && e.keyCode === KEYCODES.TAB) { // Shift + Tab
    console.log('MS-ShiftTab'); // fires
    console.log('MS-Base: ' , $(ms)); // shows basic internal functions
    console.log('MS-Input: ' , $(ms.input)); // correctly targets input
    console.log('MS-First: ' , $(ms.input).siblings('.ms-sel-item').first()); // correctly targets first item
    $(ms.input).siblings('.ms-sel-item').first().focus(); // Doesn't work
 }

Here's a shot in console.log: