Toolbar Example

NOTE: This example is not yet complete. When it is ready for review, feedback will be welcome in issue 126.

Following is an example implementation of the design pattern for toolbar that demonstrates how a toolbar can group buttons, links, and checkboxes into a single tab stop. It also illustrates the roving tabindex method for managing focus in a composite component.


Accessibility Features

  1. The focus is managed using roving tabindex. Because the control that most recently had focus has tabindex="0", focus returns to the control that last had focus when tabbing into the toolbar.
  2. Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.
  3. The menubutton can be opened with either Enter or Down Arrow since Down Arrow is not needed to navigate a horizontal toolbar.

Keyboard Support

Role, Property, State, and Tabindex Attributes

Attribute Applied to Element Usage
role="toolbar" div Identifies the toolbar container for assistive technologies. Because focus is managed with a roving tabindex instead of aria-activedescendant, the toolbar div is not focusable.
aria-label="LABEL_STRING" div with toolbar role Since the toolbar does not have a visible label, provides an accessible label that helps screen reader users understand the purpose of the toolbar. Invisible labels are used when sighted users can derive purpose from visual context.
aria-disabled="true" button Informs assistive technologies of the disabled state.

Javascript and CSS Source Code

HTML Source Code