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.

Example

Accessibility Features

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.
Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.
The menubutton can be opened with either Enter or Down Arrow since Down Arrow is not needed to navigate a horizontal toolbar.

Keyboard Support

Tab: Moves focus into and out of the toolbar. When focus moves into the toolbar, the first enabled control receives focus. If the toolbar has previously contained focus, the control that last had focus receives focus.
Left Arrow: Moves focus to the previous control, wrapping from the first control to the last.
Right Arrow: Moves focus to the next control, wrapping from the last control to the first.
Home: Moves focus to the first control.
End: Moves focus to the last control.

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

CSS: toolbar.css
Javascript: toolbar.js

HTML Source Code


  <div class="toolbar" role="toolbar">
    <div class="toolbar-item selected"
       role="button"
       tabindex="0"
       aria-selected="true">
      
                Tool 1
            
    </div>
    <div class="toolbar-item"
       role="button"
       tabindex="-1">
      Tool 2
    </div>
    <div class="toolbar-item"
       role="button"
       tabindex="-1">
      Tool 3
    </div>
    <div class="toolbar-item"
       role="button"
       tabindex="-1">
      Tool 4
    </div>
    <div class="toolbar-item"
       role="button"
       tabindex="-1">
      Tool 5
    </div>
    <div class="menu-wrapper">
      <button tabindex="-1"
            aria-haspopup="true"
            aria-controls="menu1"
            class="toolbar-item menu-button">
        
                Menu
              
      </button>
      <ul role="menu" id="menu1">
        <li role="menuitem">
          Item 1
        </li>
        <li role="menuitem">
          Item 2
        </li>
        <li role="menuitem">
          Item 3
        </li>
        <li role="menuitem">
          Item 4
        </li>
        <li role="menuitem">
          Item 5
        </li>
        <li role="menuitem">
          Item 6
        </li>
      </ul>
    </div>
  </div>