Select

[hsskey]

📋 컴포넌트 정보

• 컴포넌트 이름: Select
• 컴포넌트 설명: Select 컴포넌트는 사용자가 제한된 옵션 집합에서 하나 이상의 옵션을 선택할 수 있도록 하는 컨트롤
• 사용 사례: 사용자에게 선택 옵션을 제공하고자 할 때 사용. 국가 목록, 카테고리 선택, 설정 등 다양한 상황에서 활용 가능

📚 참조 및 레퍼런스

• ARIA Authoring Practices: W3C ARIA Patters
  • 관련 패턴 및 적용된 접근성 기준 확인
• 기타 레퍼런스: MUI, Ant Design 등의 문서와 비교하여 패턴 분석

📝 접근성 및 ARIA 적용 여부

• ARIA Pattern 적용: ARIA Pattern 링크
  • 사용된 ARIA 속성: role="combobox", aria-controls, aria-expanded, aria-activedescendant 등이 사용됨. role="combobox"로 요소를 콤보박스로 식별하고, aria-controls로 팝업 요소를 참조함. aria-expanded는 팝업 상태를 나타내고, aria-activedescendant는 현재 포커스된 옵션을 가리킴
• 접근성 관련 고려사항: 키보드 내비게이션 및 스크린 리더 사용성 고려. 옵션 선택 시 live region을 통해 변경사항을 안내하고, 선택된 옵션에 aria-selected="true" 적용
• 접근성 기능 요약: 콤보박스와 팝업의 관계를 ARIA 속성으로 명확히 하고, 키보드로 접근 가능하도록 구현. 상태 변화를 스크린 리더에 알리기 위해 live region 활용

🏗️ 마크업 구조 분석

• HTML 시맨틱 태그 사용: <select> 요소 사용. 네이티브 HTML 요소를 사용하여 콤보박스 역할을 나타냄
• 마크업 구조 비교:

// WAI-ARIA 예시
<div class="select">
  <div id="exp_elem" role="combobox" aria-expanded="false">
    <div role="textbox" aria-readonly="true"></div>
  </div>
  <ul role="listbox" aria-labelledby="exp_elem">
    <li role="option"></li>
  </ul>
</div>

// MUI
<div class="MuiSelect-root">
  <div class="MuiSelect-select" aria-expanded="false">
    <span>Selected option</span>
    <input value="" />
  </div>
  <svg class="MuiSvgIcon-root"></svg>
</div>

// Ant Design 
<div class="ant-select">
  <div class="ant-select-selector">
    <span class="ant-select-selection-item"></span>
    <span class="ant-select-arrow">
      <span class="ant-select-arrow-icon"></span>
    </span>
  </div>
</div>

• 구조적 선택 이유:
  • WAI-ARIA: ARIA 역할과 상태를 명시적으로 제공하여 접근성을 확보함. role="combobox"로 요소의 역할을 명확히 하고, aria-expanded로 팝업 상태 전달. 옵션은 role="listbox" 내부에 role="option"으로 제공
  • MUI, Ant Design: <div> 요소를 사용하여 콤보박스 구조를 구성함. WAI-ARIA에 비해 명시적인 역할 표시는 적지만, 클래스명을 통해 의미를 파악할 수 있음. 기본적인 접근성은 고려하고 있으나, 추가적인 ARIA 속성 적용이 필요해 보임

💡 UI 라이브러리 비교 분석

• MUI: <div> 기반 구조. 기본 접근성을 고려하고 있으나 ARIA 속성 적용이 부족해 보임. 클래스명을 통해 콤보박스의 각 부분을 식별할 수 있음
• Ant Design: <div> 기반 구조. 클래스명으로 콤보박스의 각 부분을 표시. ARIA 속성 적용이 거의 없어 접근성 개선이 필요해 보임

⚙️ 구현 및 설계 고려사항

• 주요 설계 고려사항: 네이티브 <select> 또는 <div> 기반 커스텀 콤보박스 구현 시, WAI-ARIA 패턴에 따른 마크업과 키보드 인터랙션 구현이 중요함. 상태 변화를 live region으로 알리는 것도 접근성 향상에 도움이 됨
• 코드 예시:

<div class="select">
  <div tabindex="0" 
       id="exp_elem" 
       role="combobox" 
       aria-labelledby="exp_label"
       aria-expanded="false" 
       aria-controls="exp_elem_list"
       aria-activedescendant=""
       aria-required="true">
    <span id="exp_label">Select an option</span>
    <div role="textbox" aria-readonly="true"></div>
  </div>
  <ul id="exp_elem_list" role="listbox">
    <li id="exp_elem_list_1" role="option">Option 1</li>
    <li id="exp_elem_list_2" role="option">Option 2</li>
    <li id="exp_elem_list_3" role="option">Option 3</li>
  </ul>
  <div aria-live="polite" aria-atomic="true" class="visually-hidden">
    Option 1 selected
  </div>
</div>

// 콤보박스 토글 함수
function toggleSelectExpanded(select) {
  const expanded = select.getAttribute('aria-expanded') === 'true';
  select.setAttribute('aria-expanded', !expanded);
}

// 옵션 선택 함수
function selectOption(select, option) {
  const selected = select.querySelector('[aria-selected="true"]');
  if (selected) {
    selected.setAttribute('aria-selected', 'false');
  }
  option.setAttribute('aria-selected', 'true');
  select.querySelector('div[role="textbox"]').textContent = option.textContent;
  select.setAttribute('aria-activedescendant', option.id);
  
  // Live region으로 선택 사항 알림 
  const liveRegion = select.nextElementSibling;
  liveRegion.textContent = option.textContent + ' selected';
}

// 키보드 이벤트 핸들링
function handleKeyboard(event) {
  const { key } = event;
  const select = event.currentTarget;
  const options = select.nextElementSibling.querySelectorAll('[role="option"]');
  let activeIndex = Array.from(options).indexOf(document.getElementById(select.getAttribute('aria-activedescendant')));

  if (key === 'ArrowDown') {
    event.preventDefault();
    activeIndex = Math.min(activeIndex + 1, options.length - 1);
    selectOption(select, options[activeIndex]);
  } 
  else if (key === 'ArrowUp') {
    event.preventDefault();
    activeIndex = Math.max(activeIndex - 1, 0);
    selectOption(select, options[activeIndex]);
  }
  else if (key === 'Escape') {
    select.querySelector('div[role="textbox"]').textContent = '';
    select.setAttribute('aria-activedescendant', '');
    toggleSelectExpanded(select);
  }
}

🔍 테스트 및 검토

• 접근성 테스트: 키보드 내비게이션 및 스크린 리더 호환성 테스트. 옵션 선택 시 live region을 통해 적절한 안내가 제공되는지 확인
• 브라우저 호환성 테스트: 주요 브라우저에서의 렌더링 및 기능 동작 확인
• 사용자 피드백: 다양한 사용자를 대상으로 사용성 테스트를 진행하고, 피드백을 수렴하여 개선

📌 추가 참고 사항

• 관련 문서: W3C WAI-ARIA Combobox Pattern, MDN - <select> element
• Web.dev Multi-Select Article
• 의견 및 제안: Select 컴포넌트 구현 시 접근성을 고려한 설계 및 WAI-ARIA 패턴 적용에 대한 의견 및 제안

🎯 역할, 속성, 상태 및 태그 속성

• Role, Attribute, State
  • Role: role="combobox", role="textbox", role="listbox", role="option" 사용하여 컴포넌트의 역할 명시
  • Attribute & State: aria-expanded, aria-controls, aria-activedescendant, aria-selected 등을 사용하여 콤보박스의 상태와 관계 표현
    • aria-expanded: 콤보박스 팝업 상태(열림/닫힘) 표시
    • aria-controls: 콤보박스가 제어하는 팝업(listbox) 요소 명시
    • aria-activedescendant: 현재 포커스된 옵션 요소의 ID 참조
    • aria-selected: 선택된 옵션임을 나타냄
• JavaScript 및 CSS 사용 여부
  • JavaScript 사용: 키보드 이벤트 핸들링, 팝업 토글, 옵션 선택 등의 기능 구현에 사용
  • CSS 적용: 콤보박스의 레이아웃 및 디자인을 위한 CSS 스타일 적용. 단, 시각적 효과가 접근성을 저해하지 않도록 주의