드롭다운의 정체를 밝혀라 — Combobox, Multiselect, Listbox 완전 해부

<label for="country-select">국가 선택</label>
<div role="combobox" aria-expanded="false" aria-haspopup="listbox">
  <input
    type="text"
    id="country-select"
    aria-autocomplete="list"
    aria-controls="country-listbox"
  />
</div>
<ul id="country-listbox" role="listbox" aria-label="국가 목록">
  <li role="option" id="kr">대한민국</li>
  <li role="option" id="us">미국</li>
  <li role="option" id="jp">일본</li>
</ul>

<label for="tag-input">기술 스택</label>
<div class="multiselect" role="combobox" aria-expanded="false" aria-haspopup="listbox">
  <div class="selected-tags" aria-live="polite">
    <span class="tag" role="option" aria-selected="true">React</span>
    <span class="tag" role="option" aria-selected="true">TypeScript</span>
  </div>
  <input
    type="text"
    id="tag-input"
    aria-autocomplete="list"
    aria-controls="tech-listbox"
  />
</div>
<ul id="tech-listbox" role="listbox" aria-multiselectable="true" aria-label="기술 스택 목록">
  <li role="option" aria-selected="false">Vue</li>
  <li role="option" aria-selected="false">Svelte</li>
  <li role="option" aria-selected="false">Angular</li>
</ul>

<label id="font-label">폰트 선택</label>
<ul role="listbox" aria-labelledby="font-label" tabindex="0">
  <li role="option" aria-selected="false">Pretendard</li>
  <li role="option" aria-selected="true">Noto Sans KR</li>
  <li role="option" aria-selected="false">IBM Plex Sans KR</li>
  <li role="option" aria-selected="false">Spoqa Han Sans Neo</li>
</ul>

<div class="dual-listbox">
  <div>
    <label id="available-label">사용 가능</label>
    <ul role="listbox" aria-labelledby="available-label" aria-multiselectable="true">
      <li role="option">권한 A</li>
      <li role="option">권한 B</li>
      <li role="option">권한 C</li>
    </ul>
  </div>
  <div class="controls">
    <button aria-label="선택 항목 추가">&rarr;</button>
    <button aria-label="선택 항목 제거">&larr;</button>
  </div>
  <div>
    <label id="selected-label">선택됨</label>
    <ul role="listbox" aria-labelledby="selected-label" aria-multiselectable="true">
      <li role="option">권한 D</li>
    </ul>
  </div>
</div>

[role="listbox"]:focus [aria-selected="true"] {
  outline: 2px solid #4a90d9;
  outline-offset: -2px;
}
 
[role="option"]:hover {
  background-color: #f0f0f0;
}
 
[role="option"][aria-selected="true"] {
  background-color: #e0e7ff;
  font-weight: 600;
}