Toolbar
A toolbar is a named group of controls people use often. Tab enters the group once, then arrow keys move inside it.
A real example
A chart editor puts Undo, Redo, Bold, and alignment in a “Chart formatting” toolbar. Tab enters once, arrows move between available controls, and Home goes to the first one. Disabled Undo can still be found but cannot run.
Main parts
- 01Toolbar label
- 02Grouped controls
- 03Roving focus
Use it when
Use it for three or more related controls that people use often. It is most helpful when fewer Tab stops make work faster.
Do not use it when
A row of controls is not a toolbar unless it also has the expected arrow-key behavior.
Name used in code
role=toolbar + accessible label + roving tabindex Before you ship
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: Use Toolbar to solve this user need without losing the current context. User context: A chart editor puts Undo, Redo, Bold, and alignment in a “Chart formatting” toolbar. Tab enters once, arrows move between available controls, and Home goes to the first one. Disabled Undo can still be found but cannot run. Recommended pattern: Toolbar. Why it fits: Use it for three or more related controls that people use often. It is most helpful when fewer Tab stops make work faster. Do not use it when: A row of controls is not a toolbar unless it also has the expected arrow-key behavior. 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): It is official for that source. Other platforms or teams may use the term in another way. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Check this request
Review the current use of Toolbar. Definition: A toolbar is a named group of controls people use often. Tab enters the group once, then arrow keys move inside it. 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, report the evidence you found, gaps, severity, and the smallest safe fix.