IE 11 не показывает элементы списка

Question

Я бы хотел отобразить комбинированный список в IE 11, сославшись на эту статью https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html, но по какой-то причине я не могу отобразить элементы списка в IE, но для других браузеров он работает нормально.Любая идея?

Если я пытаюсь удалить эту строку

this.domNode = domNode;

, он показывает мне список, но не кликабелен.

класс javascript

/*
*   This content is licensed according to the W3C Software License at
*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*/
var Option = function (domNode, listboxObj) {

  this.domNode = domNode;
  this.listbox = listboxObj;
  this.textContent    = domNode.textContent;
  this.textComparison = domNode.textContent.toLowerCase();

};

Option.prototype.init = function () {

  if (!this.domNode.getAttribute('role')) {
    this.domNode.setAttribute('role', 'option');
  }

  this.domNode.addEventListener('click',      this.handleClick.bind(this));
  this.domNode.addEventListener('mouseover',  this.handleMouseover.bind(this));
  this.domNode.addEventListener('mouseout',   this.handleMouseout.bind(this));

};

/* EVENT HANDLERS */

Option.prototype.handleClick = function (event) {
  this.listbox.setOption(this);
  this.listbox.close(true);
};

Option.prototype.handleMouseover = function (event) {
  this.listbox.hasHover = true;
  this.listbox.open();

};

Option.prototype.handleMouseout = function (event) {
  this.listbox.hasHover = false;
  setTimeout(this.listbox.close.bind(this.listbox, false), 300);
};

HTML

<section>
      <h2 id="ex_label">Example</h2>
      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
      <div id="ex1">
        <div class="combobox-list">
          <label for="cb1-input">Search</label>
          <div class="group">
            <input id="cb1-input" class="cb_edit" type="text"
                   role="combobox"
                   aria-autocomplete="none"
                   aria-expanded="false"
                   aria-haspopup="true"
                   aria-owns="cb1-listbox"
                   readonly 
            />
            <button id="cb1-button" tabindex="-1" aria-label="Open">
              &#9661;
            </button>
          </div>
          <ul id="cb1-listbox" role="listbox" aria-label="Previous Searches">
            <li id="lb1-01" role="option">weather</li>
            <li id="lb1-02" role="option">salsa recipes</li>
            <li id="lb1-03" role="option">cheap flights to NY</li>
            <li id="lb1-04" role="option">dictionary</li>
            <li id="lb1-05" role="option">baseball scores</li>
            <li id="lb1-06" role="option">hotels in NY</li>
            <li id="lb1-07" role="option">mortgage calculator</li>
            <li id="lb1-08" role="option">restaurants near me</li>
            <li id="lb1-09" role="option">free games</li>
            <li id="lb1-10" role="option">gas prices</li>
            <li id="lb1-11" role="option">classical music</li>
          </ul>
        </div>
      </div>
      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
    </section>