ActionBar

A collection of horizontally aligned IconButtons. The IconButtons can be split into groups by adding a divider. When there is not enough space, IconButtons that don't fit will be added to an overflow menu.

Page navigation navigation

Role

An ActionBar has an ARIA role of toolbar by default. The toolbar role only has a single tab stop. Focus is moved within the ActionBar using the left and right arrow keys, the "Home" key, and the "End" key.

Key	Description
`Tab`	Moves focus into and out of the ActionBar. Note that there should only be one tab-stop and pressing tab again should focus the next focusable element after the ActionBar. Also the first button is focused if the ActionBar is receiving focus for the first time after page load. Otherwise, the most recently focused button receives focus.
`→`	Right arrow moves focus to the next button. If the last button has focus, focus loops back to the first button.
`←`	Left arrow moves focus to the previous button. If the first button has focus, focus moves to the last button.
`Home`	Moves focus to the first button.
`End`	Moves focus to the last button.
`Enter` or `Space`	Triggers the button action.

The toolbar role should be overridden if you're using an ActionBar in a context where the behavior of left arrow, right arrow, "Home", and "End" keys conflict with their behavior in a toolbar. For example, as list item actions within a list where focus may be moved between items using arrow, "Home", and "End" keys.

In cases where we don't use the toolbar role, no role is applied and each buttons has one tab stop (their default keyboard navigation behavior).

Touch targets

When the user is on a device with coarse pointer (such as a touch screen), the button target needs to be enlarged so users can easily tap the correct target button.

Ensure ActionBar buttons have a large enough touch target size (44px by 44px). The buttons should respond to hovers, clicks, and taps anywhere in the touch target area, even if it isn't directly on the control. To avoid overlapping of touch targets, additional space between each button is needed (for example a 12px gap for medium sized buttons).