Toolbar
Barra de herramientas
Una barra de herramientas es un grupo con nombre de controles que las personas usan frecuentemente. Tab entra al grupo una vez, luego las teclas de flecha se mueven dentro de él.
Un ejemplo real
Un editor de gráficos pone Deshacer, Rehacer, Negrita y alineación en una barra de herramientas de “Formato de gráfico”. Tab entra una vez, las flechas se mueven entre los controles disponibles y Home va al primero. Deshacer deshabilitado todavía puede encontrarse, pero no puede ejecutarse.
Partes principales
- 01Etiqueta de la barra de herramientas
- 02Controles agrupados
- 03Enfoque móvil
Úsalo cuando
Úselo para tres o más controles relacionados que las personas usan con frecuencia. Es más útil cuando menos paradas de Tab hacen que el trabajo sea más rápido.
No lo uses cuando
Una fila de controles no es una barra de herramientas a menos que también tenga el comportamiento esperado con las teclas de flecha.
Nombre usado en código
role=toolbar + accessible label + roving tabindex Antes de lanzarlo
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 Barra de herramientas (Toolbar). User context: Un editor de gráficos pone Deshacer, Rehacer, Negrita y alineación en una barra de herramientas de “Formato de gráfico”. Tab entra una vez, las flechas se mueven entre los controles disponibles y Home va al primero. Deshacer deshabilitado todavía puede encontrarse, pero no puede ejecutarse. Recommended pattern: Barra de herramientas (Toolbar). Why it fits: Úselo para tres o más controles relacionados que las personas usan con frecuencia. Es más útil cuando menos paradas de Tab hacen que el trabajo sea más rápido. Do not use it when: Una fila de controles no es una barra de herramientas a menos que también tenga el comportamiento esperado con las teclas de flecha. 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): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Barra de herramientas (Toolbar) is used now. Definition: Una barra de herramientas es un grupo con nombre de controles que las personas usan frecuentemente. Tab entra al grupo una vez, luego las teclas de flecha se mueven dentro de él. 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.