리스트박스

p#label  "관심 분야"
ul[role=listbox]  tabindex="0"  aria-labelledby="label"
                  aria-multiselectable="true"            ← 다중 선택일 때만
                  aria-activedescendant="opt-2"          ← 현재 포커스 항목
 ├─ li#opt-0[role=option]  aria-selected="true"   웹 접근성
 ├─ li#opt-1[role=option]  aria-selected="false"  모바일 앱 접근성
 └─ li#opt-2[role=option]  aria-selected="false"  문서(PDF) 접근성   ← 가상 포커스

<!-- 단일 선택 -->
<p id="lang-label">주력 언어</p>
<ul role="listbox" id="lang" tabindex="0" aria-labelledby="lang-label">
  <li role="option" id="lang-0">HTML</li>
  <li role="option" id="lang-1">CSS</li>
  <li role="option" id="lang-2">JavaScript</li>
</ul>

<!-- 다중 선택 -->
<p id="area-label">관심 분야</p>
<ul role="listbox" id="area" tabindex="0" aria-labelledby="area-label"
    aria-multiselectable="true">
  <li role="option" id="area-0" aria-selected="false">웹 접근성</li>
  <li role="option" id="area-1" aria-selected="false">모바일 앱 접근성</li>
  <li role="option" id="area-2" aria-selected="false">문서(PDF) 접근성</li>
</ul>

<script>
  initListbox(document.getElementById('lang'), function (selected) { /* 단일 */ });
  initListbox(document.getElementById('area'), function (selected) { /* 다중 */ });
</script>

// 리스트박스: aria-activedescendant 방식 (DOM 포커스는 listbox 자체에)
// 단일 선택: 선택이 포커스를 따라갑니다.  다중 선택(aria-multiselectable="true"): APG 권장 모델.
function initListbox(listbox, onChange) {
  var multi = listbox.getAttribute('aria-multiselectable') === 'true';
  var options = Array.prototype.slice.call(listbox.querySelectorAll('[role="option"]'));
  var last = options.length - 1;
  var active = -1;      // 현재 포커스(가상)가 있는 option 번호
  var anchor = -1;      // 범위 선택의 기준점 (마지막으로 선택을 바꾼 항목)
  var typed = '', typedTimer = null;

  function isSel(o) { return o.getAttribute('aria-selected') === 'true'; }
  function setSel(o, on) { o.setAttribute('aria-selected', String(on)); }
  function changed() { if (onChange) onChange(options.filter(isSel)); }

  function setActive(i) {
    if (active > -1) options[active].classList.remove('is-active');
    active = i;
    var o = options[i];
    o.classList.add('is-active');
    listbox.setAttribute('aria-activedescendant', o.id);
    o.scrollIntoView({ block: 'nearest' });
    if (!multi) {                                   // 단일 선택: 포커스 = 선택
      options.forEach(function (x) { setSel(x, x === o); });
      changed();
    }
  }
  function toggle(i) {
    setSel(options[i], !isSel(options[i]));
    anchor = i;
    changed();
  }
  function selectRange(a, b) {
    var lo = Math.min(a, b), hi = Math.max(a, b);
    for (var i = lo; i <= hi; i++) setSel(options[i], true);
    changed();
  }

  // 처음 포커스: 선택된 항목(없으면 첫 항목)
  listbox.addEventListener('focus', function () {
    if (active > -1) return;
    var firstSel = options.filter(isSel)[0];
    setActive(firstSel ? options.indexOf(firstSel) : 0);
  });

  listbox.addEventListener('keydown', function (e) {
    var key = e.key;
    if (key === 'ArrowDown' || key === 'ArrowUp') {
      e.preventDefault();
      var next = key === 'ArrowDown' ? Math.min(active + 1, last) : Math.max(active - 1, 0);
      if (next === active) return;
      setActive(next);
      if (multi && e.shiftKey) toggle(next);        // Shift + 화살표: 이동하며 선택 토글
    } else if (key === 'Home' || key === 'End') {
      e.preventDefault();
      var target = key === 'Home' ? 0 : last;
      if (multi && e.shiftKey && (e.ctrlKey || e.metaKey)) selectRange(active, target);
      setActive(target);
    } else if (key === ' ') {
      e.preventDefault();
      if (!multi) return;
      if (e.shiftKey && anchor > -1) selectRange(anchor, active);   // Shift + Space: 범위 선택
      else toggle(active);                                         // Space: 선택 토글
    } else if (multi && (e.ctrlKey || e.metaKey) && key.toLowerCase() === 'a') {
      e.preventDefault();
      var all = options.every(isSel);               // 모두 선택되어 있으면 모두 해제
      options.forEach(function (o) { setSel(o, !all); });
      changed();
    } else if (key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
      // 문자 탐색(type-ahead): 빠르게 친 글자로 시작하는 항목으로 이동
      clearTimeout(typedTimer);
      typed += key.toLowerCase();
      typedTimer = setTimeout(function () { typed = ''; }, 500);
      var start = typed.length === 1 ? active + 1 : active;
      for (var n = 0; n < options.length; n++) {
        var idx = (start + n) % options.length;
        if (options[idx].textContent.trim().toLowerCase().indexOf(typed) === 0) { setActive(idx); break; }
      }
    }
  });

  // 마우스: 단일은 클릭한 항목 선택, 다중은 토글 (Shift + 클릭은 범위 선택)
  listbox.addEventListener('mousedown', function (e) {
    var o = e.target.closest('[role="option"]');
    if (!o) return;
    e.preventDefault();
    var i = options.indexOf(o);
    if (multi) {
      if (e.shiftKey && anchor > -1) selectRange(anchor, i); else toggle(i);
    }
    setActive(i);
    listbox.focus();
  });
}

/* 가상 포커스(aria-activedescendant)와 선택 상태를 각각 다르게 표시합니다 */
[role="listbox"]:focus { outline: 2px solid Highlight; }
[role="listbox"]:focus [role="option"].is-active { outline: 2px dashed currentColor; outline-offset: -2px; }
[role="option"][aria-selected="true"] { background: Highlight; color: HighlightText; }
[aria-multiselectable="true"] [role="option"]::before { content: "☐ "; }
[aria-multiselectable="true"] [role="option"][aria-selected="true"]::before { content: "☑ "; }