개요

토글 버튼을 클릭하여 목록을 열고 항목 선택으로 값을 설정하는 컴포넌트입니다.

HTML 구조

<div class="dewp-dropdown">
  <button class="dewp-dropdown-toggle dewp-btn" type="button">선택</button>
  <div class="dewp-dropdown-menu">
    <div class="dewp-dropdown-item" data-value="opt1">옵션 1</div>
  </div>
</div>
        

JavaScript 초기화

// 자동 초기화(페이지 내 모든 드롭다운)
DEWP.autoInitializeDropdowns();

// 직접 생성 예시
// DEWP.createDropdown({ container: '.dewp-dropdown' });
        

JS API

DEWP.toggleDropdown(dropdownEl);
DEWP.showDropdown(dropdownEl);
DEWP.hideDropdown(dropdownEl);
DEWP.closeAllDropdowns();
DEWP.getSelectedValue(dropdownEl);
DEWP.getSelectedText(dropdownEl);
DEWP.setDropdownValue(dropdownEl, 'opt1');
        

접근성

• 토글에 aria-expanded, aria-controls 업데이트
• 목록은 포커스 트랩 없이 ESC로 닫기, 닫힌 후 토글로 포커스 복귀
• 키보드: Arrow/Enter/Space/ESC 지원

필수 클래스/속성

• 컨테이너: .dewp-dropdown
• 토글 버튼: .dewp-dropdown-toggle (필수 속성: aria-expanded, aria-controls)
• 목록: .dewp-dropdown-menu (권장 역할: role="menu")
• 항목: .dewp-dropdown-item (data-value로 값 지정, 권장 역할: role="menuitem")