css

.select-list {
  display: none;
}
.select-trigger[aria-expanded="true"] + .select-list {
  display: block;
}

html

<section class="select-section">
  <h2 type="button" aria-haspopup="listbox" aria-expanded="false" class="select-trigger" aria-labelledby="select-menu">言語切り替え</h2>
  <ul class="select-list" role="listbox" id="language-menu" inert>
    <li class="select-item" role="option" aria-selected="false" tabindex="0">日本語</li>
    <li class="select-item" role="option" aria-selected="false" tabindex="0">英語</li>
  </ul>
</section>

js

// selectとoptionの処理に必要な要素を取得
const selectTrigger = document.querySelector(".select-trigger");
const selectList = document.querySelector(".select-list");
const selectItems = document.querySelectorAll(".select-item");

// optionの表示・非表示を切り替える処理
const toggleExpanded = function () {
  selectTrigger.setAttribute("aria-expanded", selectTrigger.getAttribute("aria-expanded") === "true" ? "false" : "true");
  selectList.inert = selectList.inert === true ? false : true;
};
selectTrigger.addEventListener("click", toggleExpanded);

// optionを選択したときの処理
const toggleSelected = function (event) {
  selectItems.forEach(function (item) {
    item.setAttribute("aria-selected", "false");
  });
  event.currentTarget.setAttribute("aria-selected", "true");
};
selectItems.forEach(function (elem) {
  elem.addEventListener("click", toggleSelected);
});

// expandedなとき、option以外をクリックしたらoptionを閉じる処理
const setUnExpanded = function () {
  selectTrigger.setAttribute("aria-expanded", "false");
  selectList.inert = true;
};
const closeSelectList = function (event) {
  if (event.target === selectTrigger || selectList.contains(event.target)) {
    return;
  }
  if (selectTrigger.getAttribute("aria-expanded") === "true") {
    setUnExpanded();
  }
};
document.addEventListener("click", closeSelectList);