Как активировать пункт раскрывающегося меню начальной загрузки, нажав клавишу клавиатуры

document.addEventListener("DOMContentLoaded", function() {
  const dropdownMenu = document.querySelector('.dropdown-menu');
  const action = document.querySelector('#dropdown-btn');
  const sections = dropdownMenu.querySelectorAll('li u');
  const setClickForUnderlinedEls = (els, key) => {
    els.forEach(sec => {
      if (key === sec.textContent.toLowerCase()) {
        sec.click()
      }
    });
  }
  action.addEventListener('click', (event) => {
    addEventListener('keydown', (e) => {
      if (event.target.ariaExpanded !== 'false') {
        setClickForUnderlinedEls(sections, e.key);
      }
    });
  })
});

#vertical-space,
#section1,
#section2,
#section3,
#section4,
#section5{
  height: 100vh;
}

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous"></script>

<!-- Example single danger button -->
<div class = "btn-group" id = "top">
  <!--/ Added the id dropdown-btn for this example /-->
  <button id = "dropdown-btn" type = "button" class = "btn btn-danger dropdown-toggle" data-bs-toggle = "dropdown" aria-expanded = "false">
    Action
  </button>
  <ul class = "dropdown-menu">
    <li><a class = "dropdown-item" href = "#section1"><u>A</u>ction</a></li>
    <li><a class = "dropdown-item" href = "#section2">A<u>n</u>other action</a></li>
    <li><a class = "dropdown-item" href = "#section3"><u>W</u>e have a link</a></li>
    <li><a class = "dropdown-item" href = "#section4"><u>S</u>omething else here</a></li>
    <li>
      <hr class = "dropdown-divider">
    </li>
    <li><a class = "dropdown-item" href = "#section5">S<u>e</u>parated link</a></li>
  </ul>
</div>
<!--/ added purely for example /-->
<div id = "vertical-space">
</div>
<div id = "section1">
  <p>
    You pressed the <strong>a</strong> button and instantiated a click on the <em>Action</em> button. <a href = "#top">Back to top</a>
  </p>
  
</div>
<div id = "section2">
  <p>
    You pressed the <strong>n</strong> button and instantiated a click on the <em>Another action</em> button. <a href = "#top">Back to top</a>
  </p>
</div>
<div id = "section3">
  <p>
    You pressed the <strong>w</strong> button and instantiated a click on the <em>We have a link</em> button. <a href = "#top">Back to top</a>
  </p>
</div>
<div id = "section4">
  <p>
    You pressed the <strong>s</strong> button and instantiated a click on the <em>Something else here</em> button. <a href = "#top">Back to top</a>
  </p>
</div>
<div id = "section5">
  <p>
    You pressed the <strong>e</strong> button and instantiated a click on the <em>Separate link</em> button. <a href = "#top">Back to top</a>
  </p>
</div>