콤보박스(자동완성)

label#city-label  "도시"
input[role=combobox]                                ← DOM 포커스는 항상 여기
  aria-autocomplete="list"
  aria-expanded="true"
  aria-controls="city-list"         ─────┐
  aria-activedescendant="opt-1"     ──┐  │
ul#city-list[role=listbox]  ◀─────────┼──┘  aria-labelledby="city-label"
  li#opt-0[role=option]  부산          │
  li#opt-1[role=option]  부천  aria-selected="true"  ◀── 가상 포커스
p[role=status]  "추천 도시 2개가 있습니다."   ← 결과 건수 안내

<label for="city" id="city-label">도시</label>
<div class="combobox">
  <input type="text" id="city" role="combobox"
         aria-autocomplete="list" aria-expanded="false" aria-controls="city-list"
         autocomplete="off">
  <ul role="listbox" id="city-list" aria-labelledby="city-label" hidden></ul>
</div>
<p id="city-status" role="status"></p>

<script>
  initCombobox(
    document.getElementById('city'),
    document.getElementById('city-list'),
    document.getElementById('city-status'),
    ['서울', '부산', '대구', '인천', '광주', '대전', '울산', '세종']
  );
</script>

// 목록 자동완성 콤보박스 (aria-autocomplete="list")
// DOM 포커스는 항상 입력란에 두고, 목록의 "가상 포커스"는 aria-activedescendant로 알립니다.
function initCombobox(input, listbox, status, data) {
  var options = [];      // 현재 보이는 option 요소들
  var active = -1;       // 가상 포커스가 있는 option 번호 (-1 = 입력란)
  var announceTimer = null;

  function matches(q) {
    if (!q) return data.slice();
    return data.filter(function (d) { return d.indexOf(q) === 0; });   // 앞부분 일치
  }

  function render(list) {
    listbox.innerHTML = '';
    options = list.map(function (text, i) {
      var li = document.createElement('li');
      li.setAttribute('role', 'option');
      li.id = listbox.id + '-opt-' + i;
      li.textContent = text;
      listbox.appendChild(li);
      return li;
    });
    active = -1;
    input.removeAttribute('aria-activedescendant');
  }

  function isOpen() { return input.getAttribute('aria-expanded') === 'true'; }
  function open() {
    if (!options.length) return;
    listbox.hidden = false;
    input.setAttribute('aria-expanded', 'true');
  }
  function close() {
    listbox.hidden = true;
    input.setAttribute('aria-expanded', 'false');
    setActive(-1);
  }

  function setActive(i) {
    if (active > -1 && options[active]) options[active].removeAttribute('aria-selected');
    active = i;
    if (i > -1) {
      options[i].setAttribute('aria-selected', 'true');
      input.setAttribute('aria-activedescendant', options[i].id);
      options[i].scrollIntoView({ block: 'nearest' });
    } else {
      input.removeAttribute('aria-activedescendant');
    }
  }

  function choose(i) {
    input.value = options[i].textContent;
    close();
    input.focus();
  }

  // 결과 건수: 입력이 멈춘 뒤 한 번만 알립니다 (입력할 때마다 말하면 방해가 됩니다).
  function announce(count) {
    clearTimeout(announceTimer);
    announceTimer = setTimeout(function () {
      status.textContent = count
        ? '추천 도시 ' + count + '개가 있습니다. 위아래 화살표로 고르세요.'
        : '일치하는 도시가 없습니다.';
    }, 700);
  }

  function update(showAllWhenEmpty) {
    var q = input.value.trim();
    if (!q && !showAllWhenEmpty) { render([]); close(); status.textContent = ''; return; }
    var list = matches(q);
    render(list);
    if (list.length) open(); else close();
    announce(list.length);
  }

  input.addEventListener('input', function () { update(false); });

  input.addEventListener('keydown', function (e) {
    if (e.isComposing || e.keyCode === 229) return;   // 한글 조합 중인 키는 무시
    var n = options.length;
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        if (!isOpen()) { update(true); if (!e.altKey && options.length) setActive(0); }
        else if (!e.altKey) setActive((active + 1) % n);
        break;
      case 'ArrowUp':
        e.preventDefault();
        if (e.altKey) { if (active > -1) choose(active); else close(); }
        else if (!isOpen()) { update(true); if (options.length) setActive(options.length - 1); }
        else setActive(active <= 0 ? n - 1 : active - 1);
        break;
      case 'Enter':
        if (isOpen() && active > -1) { e.preventDefault(); choose(active); }
        break;
      case 'Escape':
        e.preventDefault();
        e.stopPropagation();
        if (isOpen()) close(); else { input.value = ''; render([]); status.textContent = ''; }
        break;
      case 'ArrowLeft': case 'ArrowRight': case 'Home': case 'End':
        setActive(-1);     // 가상 포커스를 입력란으로 되돌리고, 커서는 기본 동작대로 이동
        break;
      case 'Tab':
        close();
        break;
    }
  });

  // 마우스: mousedown 기본 동작을 막아 입력란의 포커스를 유지한 채 고릅니다.
  listbox.addEventListener('mousedown', function (e) { e.preventDefault(); });
  listbox.addEventListener('click', function (e) {
    var li = e.target.closest('[role="option"]');
    if (li) choose(options.indexOf(li));
  });
  input.addEventListener('blur', function () { close(); });
}

/* 가상 포커스(aria-activedescendant)는 브라우저가 표시해 주지 않으므로 직접 그립니다 */
[role="option"][aria-selected="true"] {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  background: Highlight;
  color: HighlightText;
}
[role="listbox"] { max-height: 14rem; overflow-y: auto; }