autoComplete.js Is there a way to TAB through results list and press enter to trigger a search query in IE11?

Viewed 43

I am updating my question because I have figured a way to make this work in Chrome, Firefox, Edge, etc. The last remaining browser is IE11.

I am using the autoComplete.js javascript library. Everything is hooked up and working.

I want to make a small accessibility improvement.

I notice when I type in the my search and the results list displays, I can press the TAB key to tab through the results list items.

However, when I press "ENTER" it does not trigger the query. This is strange behavior because when I press the down arrow after typing a search, I see the results list items highlighted (same as it did when I pressed the TAB button) and when I press ENTER the query fires.

I have tried adding tabSelect: true in the resultsLists config section, but I don't see any difference.

What I ended up doing was in my "resultItem" section, I added an eventlistener on the source to look for keyup events. I took the logic we had used for the "onSelection" section and applied it to the "resultItem" section.

What I see in IE11 is when I TAB through the list, I do not see the "selected" class getting added to the autocomplete suggestions. I can tab to them, but when I press ENTER it is only getting what I have typed in the input field.

Basically, the code I have looks like this, but i think this is an issue within autoComplete.js. This is totally understandable since the world is leaving IE11 behind. Our team may determine is not worth spending the time to fix.

A short code example:

resultItem: {
  content: function content(data, source) {
    source.tabIndex = 0;
    source.innerHTML = data.match;
    source.addEventListener('keyup', function (event) {
    if (event.keyCode == 13) { 

         // do something

     }
   });
     document.querySelector("#div-autoComplete").style.display = "block";
    input.classList.add("div-expanded");
  },
  element: "li"
},
0 Answers
Related