Popperjs для имитации поведения раскрывающегося списка Bootstrap

Question

Я бы хотел, чтобы мои раскрывающиеся меню имитировали функциональность Bootstrap. Как вы можете видеть здесь, при щелчке мышью это нормально, но у него есть проблемы с доступностью: при переходе к "расширяемому" пункту меню после нажатия "Enter" для раскрытия невозможно циклически перебирать его дочерние элементы нажатием Tab. Конечно, это происходит потому, что экземпляр popper отменяет сам себя, когда фокус покидает <a>элемент, который запускает его. Вместо этого я бы хотел, чтобы мои подменю можно было использовать, нажимая Tab, как это делают раскрывающиеся списки в Bootstrap.

Здесь вы можете увидеть ручку кода.

Вот код, который я использовал до сих пор:

HTML

<div class="topbar"><a class="topbar__logo" href="index.html"><img class="topbar__logoImg" src="logourl.jpg" alt="Logo"></a>
      <nav class="topbar__nav">
        <ul class="topbar__list">
          <li class="topbar__item topbar__item_hasDropdown"><a class="topbar__link" href="#">Shoes</a>
            <ul class="topbar__subList">
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">Training</a></li>
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">Running</a></li>
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">Sneakers</a></li>
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">Others</a></li>
            </ul>
          </li>
          <li class="topbar__item topbar__item_hasDropdown"><a class="topbar__link" href="#">Appareal</a>
            <ul class="topbar__subList">
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">Match kits</a></li>
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">T-shirts</a></li>
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">Tracksuits</a></li>
              <li class="topbar__subItem"><a class="topbar__subLink" href="#">Sweatshirts</a></li>
            </ul>
          </li>
          <li class="topbar__item"><a class="topbar__link" href="#">Outlet</a></li>
          <li class="topbar__item"><a class="topbar__link" href="#">Contacts</a></li>
        </ul>
      </nav>
    </div>

Js

let links = document.querySelectorAll('.topbar__item_hasDropdown .topbar__link');
let dropdowns = document.querySelectorAll('.topbar__subList');

var popperInstance;

links.forEach((link) => {
    let dropdown = link.nextElementSibling;

    link.addEventListener('click', () => {
        dropdown.style.display = 'block';
        popperInstance = createPopper(link, dropdown, {
            placement: 'bottom-start',
        });
    });

    link.addEventListener('focusout', () => {
        if (popperInstance != null) {
            popperInstance.destroy();
        }
        dropdowns.forEach((dropdown) => {
            dropdown.style.display = '';
        });
    });
});