Listbox
목록 상자
리스트박스는 선택 항목의 사용자 정의 목록입니다. 어떤 선택 항목이 활성화되어 있는지와 화살표 키가 목록을 어떻게 이동하는지를 관리합니다.
실제 예시
디스패처는 180개의 검색 가능한 결과 중에서 하나의 창고를 선택합니다. 화살표 키로 선택지를 이동할 수 있으며, Enter 키로 선택합니다. 필터링 후에도 화면 낭독기는 선택된 창고를 계속 읽어줍니다. 짧은 고정 목록은 내장 `<select>`를 대신 사용해야 합니다.
주요 부분
- 01목록 상자 컨테이너
- 02활성 옵션
- 03선택 상태
사용할 때
내장 `<select>`가 검색, 풍부한 선택, 여러 항목 선택을 처리할 수 없을 때만 커스텀 리스트박스를 만드세요.
다음 경우에는 사용하지 마세요
옵션 안에 버튼, 링크 또는 다른 개별 컨트롤을 넣지 마세요.
코드에서 사용된 이름
role=listbox + role=option + aria-selected + roving focus/aria-activedescendant 출시하기 전에
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome：Complete the task with 목록 상자 (Listbox)。 User context：디스패처는 180개의 검색 가능한 결과 중에서 하나의 창고를 선택합니다. 화살표 키로 선택지를 이동할 수 있으며, Enter 키로 선택합니다. 필터링 후에도 화면 낭독기는 선택된 창고를 계속 읽어줍니다. 짧은 고정 목록은 내장 `<select>`를 대신 사용해야 합니다. Recommended pattern：목록 상자 (Listbox)。 Why it fits：내장 `<select>`가 검색, 풍부한 선택, 여러 항목 선택을 처리할 수 없을 때만 커스텀 리스트박스를 만드세요. Do not use it when：옵션 안에 버튼, 링크 또는 다른 개별 컨트롤을 넣지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 목록 상자 (Listbox) is used now. Definition: 리스트박스는 선택 항목의 사용자 정의 목록입니다. 어떤 선택 항목이 활성화되어 있는지와 화살표 키가 목록을 어떻게 이동하는지를 관리합니다. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.