ActionBar

Role and semantics

ActionBar has two parts. An invisible role="status" region that is always rendered announces the selection count; it is read when the bar first appears too. The actions are drawn with Toolbar: role="toolbar" and the name “Bulk actions” from the Provider. The visible count text carries aria-hidden so the count is not read twice. The clear button is named “Clear selection”.

Keyboard

Key	Behaviour
Tab	Enters the bar; a second Tab leaves it.
Left and right arrow	Moves between buttons, wrapping at the end.
Enter or Space	Runs the focused button.
Escape	Clears the selection while focus is in the bar.

Focus

The bar does not take focus when it appears, so the user keeps selecting. When the selection is cleared the bar is removed; if focus was in the bar, the product team must put it back in the list. Buttons show a 2 px color-focus-ring ring on keyboard focus only.

Screen reader output

Example	Read as
First selection	“1 selected”
Selection grows	“3 selected”
Entering the bar	“Bulk actions, toolbar, Clear selection, button”

Contrast

The count and labels keep at least 4.5:1 on the raised surface. A floating bar stands out from the page with its shadow, an inline bar with its border.

WCAG 2.2

Criterion	How ActionBar meets it	What the product team must do
1.3.1 Info and relationships	toolbar role and name.	Keep the actions applicable to the selected items.
2.1.1 Keyboard	Arrow keys, Enter, Space and Escape.	Do not add your own key handlers.
2.4.3 Focus order	The bar does not steal focus.	Put focus back in the list when the selection is cleared.
2.4.11 Focus not obscured (minimum)	A floating bar sits at the bottom of the screen.	Leave space at the bottom of the page as tall as the bar so the focused item is not covered.
4.1.3 Status messages	The count is announced with role="status".	Update the count on every selection change.