Toolbar
Barra de ferramentas
Uma barra de ferramentas é um grupo nomeado de controles que as pessoas usam com frequência. Tab entra no grupo uma vez, depois as setas movimentam dentro dele.
Um exemplo real
Um editor de gráficos coloca Desfazer, Refazer, Negrito e alinhamento em uma barra de ferramentas “Formatação de gráfico”. Tab move o foco uma vez, setas se movem entre os controles disponíveis e Home vai para o primeiro. Desfazer desabilitado ainda pode ser encontrado, mas não pode ser executado.
Partes principais
- 01Rótulo da barra de ferramentas
- 02Controles agrupados
- 03Foco móvel
Use-o quando
Use-o para três ou mais controles relacionados que as pessoas usam com frequência. É mais útil quando menos paradas de Tab tornam o trabalho mais rápido.
Não o use quando
Uma fila de controles não é uma barra de ferramentas a menos que também tenha o comportamento esperado das teclas de seta.
Nome usado no código
role=toolbar + accessible label + roving tabindex Antes de lançar
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 ferramentas (Toolbar). User context: Um editor de gráficos coloca Desfazer, Refazer, Negrito e alinhamento em uma barra de ferramentas “Formatação de gráfico”. Tab move o foco uma vez, setas se movem entre os controles disponíveis e Home vai para o primeiro. Desfazer desabilitado ainda pode ser encontrado, mas não pode ser executado. Recommended pattern: Barra de ferramentas (Toolbar). Why it fits: Use-o para três ou mais controles relacionados que as pessoas usam com frequência. É mais útil quando menos paradas de Tab tornam o trabalho mais rápido. Do not use it when: Uma fila de controles não é uma barra de ferramentas a menos que também tenha o comportamento esperado das teclas de seta. 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): É oficial para essa fonte. Outras plataformas ou equipes podem usar o termo de outra maneira. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Barra de ferramentas (Toolbar) is used now. Definition: Uma barra de ferramentas é um grupo nomeado de controles que as pessoas usam com frequência. Tab entra no grupo uma vez, depois as setas movimentam dentro dele. 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.