Toolbar
도구 모음
도구 모음은 사람들이 자주 사용하는 컨트롤의 이름이 있는 그룹입니다. Tab 키를 누르면 그룹 안으로 들어가고, 화살표 키로 그 안에서 이동할 수 있습니다.
실제 예시
차트 편집기는 Undo, Redo, Bold 및 정렬을 “차트 형식 지정” 도구 모음에 배치합니다. Tab을 한 번 누르면 Enter가 되고, 화살표는 사용 가능한 컨트롤 사이를 이동하며, Home은 첫 번째 항목으로 이동합니다. 비활성화된 Undo도 찾을 수 있지만 실행할 수 없습니다.
주요 부분
- 01도구 모음 라벨
- 02그룹화된 컨트롤
- 03로빙 포커스
사용할 때
사람들이 자주 사용하는 세 개 이상의 관련 컨트롤에 사용하세요. 탭 중지가 적을수록 작업 속도가 빨라질 때 가장 유용합니다.
다음 경우에는 사용하지 마세요
제어 행이 예상 화살표 키 동작을 갖추지 않은 경우에는 도구 모음이 아닙니다.
코드에서 사용된 이름
role=toolbar + accessible label + roving tabindex 출시하기 전에
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome：Complete the task with 도구 모음 (Toolbar)。 User context：차트 편집기는 Undo, Redo, Bold 및 정렬을 “차트 형식 지정” 도구 모음에 배치합니다. Tab을 한 번 누르면 Enter가 되고, 화살표는 사용 가능한 컨트롤 사이를 이동하며, Home은 첫 번째 항목으로 이동합니다. 비활성화된 Undo도 찾을 수 있지만 실행할 수 없습니다. Recommended pattern：도구 모음 (Toolbar)。 Why it fits：사람들이 자주 사용하는 세 개 이상의 관련 컨트롤에 사용하세요. 탭 중지가 적을수록 작업 속도가 빨라질 때 가장 유용합니다. 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 도구 모음 (Toolbar) is used now. Definition: 도구 모음은 사람들이 자주 사용하는 컨트롤의 이름이 있는 그룹입니다. Tab 키를 누르면 그룹 안으로 들어가고, 화살표 키로 그 안에서 이동할 수 있습니다. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.