Toolbar Example

About This Example

The following example of an editor toolbar implements the Toolbar Pattern and demonstrates how a toolbar can group a set of interactive widgets into a single tab stop. For illustrative and interoperability assessment purposes, this implementation includes a diverse set of widgets, some of which may not be ordinarily grouped in the same toolbar. For instance, it includes both a checkbox and toggle buttons. In a typical implementation, the design would use either one or the other but not both. Similarly, the edit field is included to help simulate actual implementation and is not intended to represent an actual rich text editor. This example also illustrates the practice of Managing Focus Within Components Using a Roving tabindex.

Example

Abraham Lincoln's Gettysburg Address

Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow, this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us, that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion, that we here highly resolve that these dead shall not have died in vain, that this nation, under God, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.

Accessibility Features

Keyboard Features

When tabbing into the toolbar, focus returns to the control that last had focus. Focus movement inside the toolbar implements the practice of Managing Focus Within Components Using a Roving tabindex.
When any of the cut, copy and paste buttons are disabled they remain focusable to ensure screen reader users are aware of their presence. For additional guidance, see Focusability of disabled controls.
Left Arrow and Right Arrow navigate among elements in the toolbar so Up Arrow and Down Arrow are available to:
- Navigate among radios in the text alignment group. For instance, Down Arrow moves focus from last to first member in the group.
- Open the font menu button, which can also be opened with Enter.
- Increase and decrease the font size spin button.

Focus Styling

When the toolbar has focus, the container element border is highlighted, helping indicate that the container supports directional navigation with the arrow keys.
When a toolbar item has focus, its border is highlighted and the background color of the button also changes.

Button Popup Labels

The bold, italic, underline, and text align buttons have popup labels that implement the requirements of WCAG Success Criterion 1.4.13 Content on Hover or Focus:

When a bold, italic, underline, or text align button receives focus or mouse hover, a popup appears above the button revealing its text label.
The popup label remains visible when the pointer hovers over the label content.
Pressing Esc hides the popup label .

Keyboard Support

Toolbar

The toolbar provides the following keyboard support described in the toolbar pattern.

Key	Function
`Tab`	Moves focus into and out of the toolbar. The first control is focused if the toolbar is receiving focus for the first time after page load. Otherwise, the most recently focused control receives focus.
`Right Arrow`	Moves focus to the next control. If the last control has focus, focus moves to the first control. If an item in the popup menu has focus, does nothing.
`Left Arrow`	Moves focus to the previous control. If the first control has focus, focus moves to the last control. If an item in the popup menu has focus, does nothing.
`Home`	Moves focus to the first control.
`End`	Moves focus to the last control.
`ESC`	If a button popup label is visible, hides it.

Toggle Buttons (Bold, Italic, Underline)

The toggle buttons for choosing to apply Bold, Italic, and Underline styling provide the following keyboard support described in the Button Pattern.

Key	Function
`Enter` `Space`	Toggle the pressed state of the button.

Radio Group (Text Alignment)

The buttons for choosing left, center, or right text alignment are styled like toggle buttons. However, since pressing one toggles off another so that only one button in the group is in the pressed state, the toggles behave like radio buttons. Because ARIA is designed to inform assistive technologies about UI semantics and behaviors, not styling, the alignment toggles provide the following keyboard support described in the Radio Group Pattern. As described in the pattern, nesting a radio group in a toolbar calls for an important behavioral difference compared to radios outside a toolbar: moving focus inside the group does not automatically change which button is checked. In addition, because Left Arrow and Right Arrow are needed by the parent toolbar, they are not captured by the radio group. The toolbar thus provides navigation into, inside, and out of the nested radio group.

Key	Function
`Enter` `Space`	If the focused radio button is checked, do nothing. Otherwise, uncheck the currently checked radio button and check the radio button that has focus.
`Down Arrow`	Moves focus to the next radio button. If the last radio button has focus, focus moves to the first radio button.
`Up Arrow`	Moves focus to the previous radio button. If the radio button has focus, focus moves to the last radio button.

Button (Cut, Copy, Paste)

The buttons for cut, copy, and paste provide the following keyboard support described in the Button Pattern. While they are HTML button elements, as described in the accessibility features section above, in order to remain focusable when disabled, they have aria-disabled instead of the HTML disabled attribute.

Key	Function
`Enter` `Space`	If the button is enabled, execute the action associated with the button. Otherwise, do nothing.

Menu Button (Font Family)

The menu button for opening the font family menu provides the following keyboard support described in the Menu Button Pattern.

Key	Function
`Enter` `Space` `Down Arrow` `Up Arrow`	Open the menu and place focus on a menu item. In this implementation, the focus is set on the currently selected font family when the menu opens.

Menu (Font Family)

The menu for choosing a font family provides the following keyboard support described in the Menu and Menubar Pattern.

Key	Function
`Enter` `Space`	Activate the menu item, close the menu, and place focus on the menu button.
`Down Arrow`	Moves focus to the next menu item. If the last menu item has focus, focus moves to the first menu item.
`Up Arrow`	Moves focus to the previous menu item. If the first menu item has focus, focus moves to the last menu item.
`ESC`	Closes the menu and moves focus to the menu button.

Spin Button (Font Size)

The spin button for changing font size provides the following keyboard support described in the Spin Button Pattern.

Key	Function
`Down Arrow`	Decreases the font size of the text in the `textarea` by 1 point.
`Up Arrow`	Increases the font size of the text in the `textarea` by 1 point.
`Page Down`	Decreases the font size of the text in the `textarea` by 5 points.
`Page Up`	Increases the font size of the text in the `textarea` by 5 points.

Checkbox (Night Mode)

The checkbox for toggling night mode provides the following keyboard support defined in the Checkbox Pattern. As an HTML input element, the browser provides the keyboard support.

Key	Function
`Space`	Toggles the state of the checkbox.

Link (Help)

The link for opening a help page provides the following keyboard support described in the Link Pattern. As an HTML link, the keyboard support is provided by the browser.

Key	Function
`Enter` `Space`	Activate the link.

Role, Property, State, and Tabindex Attributes

Toolbar

The toolbar implements the following ARIA attributes described in the Toolbar Pattern.

Role	Attribute	Element	Usage
`toolbar`		`div`	Indicates the container is a `toolbar`. The toolbar div is not focusable because it implements the practice of Managing Focus Within Components Using a Roving tabindex.
	`aria-label="Text Formatting"`	`div`	Provides the toolbar with an accessible name of "Text Formatting".
	`aria-controls="IDREF"`	`div`	Set to a value that references the text area, indicating the toolbar controls the text area.
	`tabindex="-1"`	`button`, `div`, `input[type="checkbox"]`, `a`	Makes the toolbar item focusable but not part of the page `Tab` sequence. Applied to all toolbar items contained in the toolbar except for one that is included in the page `Tab` sequence. This approach to managing focus is described in the practice of Managing Focus Within Components Using a Roving tabindex.
	`tabindex="0"`	`button`, `div`, `input[type="checkbox"]`, `a`	Makes the toolbar item part of the page `Tab` sequence. Set on only one item contained in the toolbar. On page load, set on the first item in the toolbar. Moves with focus inside the toolbar so the most recently focused item is included in the page `Tab` sequence. This approach to managing focus is described in the practice of Managing Focus Within Components Using a Roving tabindex.

Toggle Buttons (Bold, Italic, Underline)

The toggle buttons for choosing to apply Bold, Italic, and Underline styling implement the following ARIA attributes described in the Button Pattern.

Attribute	Element	Usage
`aria-pressed="true"`	`button`	Indicates the button is a toggle and that the styling controlled by the button has been applied.
`aria-pressed=false`	`button`	Indicates the button is a toggle and that the styling controlled by the button has NOT been applied.
`aria-hidden="true"`	`span`	Hides the icon character from being included in the accessible name.

Radio Group (Text Alignment)

Role	Attribute	Element	Usage
`radiogroup`		`div`	Identifies the `div` element as a container for group of radio buttons.
	`aria-label="Text Alignment"`	`div`	Defines the accessible name for the group of radio buttons as "Text Alignment".
`radio`		`button`	Identifies the `button` element as a `radio` button. The accessible name comes from the child text content of the `button` element.
	`aria-checked="true"`	`button`	Indicates the radio button is checked, i.e., the type of alignment currently applied to the text area. Only one radio button in the group has `aria-checked` set to `true` at any given time.
	`aria-checked="false"`	`button`	Indicates the radio button is NOT checked. All radio buttons in the group, except for one, have `aria-checked` set to `false`.
	`aria-hidden="true"`	`span`	Hides the icon character from being included in the accessible name.

Button (Cut, Copy, Paste)

The buttons for cut, copy, and paste implement the following ARIA attributes described in the Button Pattern. While they are HTML button elements, as described in the accessibility features section above, in order to remain focusable when disabled, they have aria-disabled instead of the HTML disabled attribute.

Role	Attribute	Element	Usage
	`aria-disabled="true"`	`button`	Set when the button is disable to inform assistive technologies of the disabled state.
	`aria-disabled="false"`	`button`	Set when the function provided by the button is available.

Menu Button (Font Family)

The menu button for opening the font family menu implements the following ARIA attributes described in the Menu Button Pattern.

Attribute	Element	Usage
`aria-label="Font: FONT_FAMILY_NAME"`	`button`	Defines the accessible name for the menu button by concatenating Font: with the name of the font family currently checked in the menu. Updated when a different font family is chosen in the font family menu.
`aria-haspopup="true"`	`button`	Indicates the `button` opens a menu. NOTE: While ARIA does not include a `menubutton`, most platform accessibility APIs have a `menubutton` role. On those platforms, assistive technologies identify buttons with `aria-haspopup` set to either `true` or `menu` as menu buttons.
`aria-controls="IDREF"`	`button`	Set to a value that references the element with role `menu`. Indicates the button opens and closes the menu.
`aria-expanded="true"`	`button`	Added when the menu is open. Indicates that the menu is displayed and that activating the menu button closes the menu. The `aria-expanded` attribute is removed when the menu is closed. Included to support touch devices where screen reader users can touch the menu button when the menu is displayed. Keyboard users cannot focus the menu button when the menu is open.

Menu (Font Family)

The menu for choosing a font family implements the following ARIA attributes described in the Menu and Menubar Pattern.

Role	Attribute	Element	Usage
`menu`		`ul`	Identifies the `ul` element as a `menu`.
	`aria-label="Font Family"`	`ul`	Defines the accessible name for the menu as "Font Family".
`menuitemradio`		`li`	Identifies the `li` element as a `menuitemradio`. The text content of the `li` element provides the accessible name of the `menuitemradio`.
	`aria-checked="true"`	`li`	Applied to an element with role `menuitemradio` to indicate the item is checked, informing users which font is applied to the text area. Only one item in the menu has the checked state at any given time.
	`aria-checked="false"`	`li`	Applied to elements with role `menuitemradio` to indicate the items are NOT checked. All items in the menu, except one, have this value.
	`tabindex="-1"`	`li`	Makes the `menuitemradio` element focusable so DOM focus can be set on the menu item. Dynamically added by JavaScript.

Spin Button (Font Size)

The spin button for changing font size implements the following ARIA attributes described in the Spin Button Pattern.

Role	Attribute	Element	Usage
`spinbutton`		`div`	Identifies the `div` element as a `spinbutton`.
	`aria-label="Font size in points"`	`div`	Defines the accessible name for the spin button as "Font size in points".
	`aria-valuenow="NUMBER_POINTS"`	`div`	Indicates the current value of the spin button. Updated by JavaScript as users adjust the value of the spin button.
	`aria-valuetext="NUMBER_POINTS Points"`	`div`	Provides a more user friendly announcement of the current value for screen reader users. `NUMBER_POINTS` is updated by JavaScript as the user adjusts the value of the spin button. As users adjust the value, instead of hearing only a number, they will hear the current value followed by the word Points, e.g., 10 Points.
	`aria-valuemin="8"`	`div`	Indicates the minimum allowed value for the spin button, i.e., smallest supported font size.
	`aria-valuemax="40"`	`div`	Indicates the maximum allowed value for the spin button, i.e., largest supported font size.

JavaScript and CSS Source Code

CSS: toolbar.css
CSS: menuButton.css
Javascript: FormatToolbar.js
Javascript: FormatToolbarItem.js
Javascript: FontMenuButton.js
Javascript: FontMenu.js
Javascript: FontMenuItem.js
Javascript: SpinButton.js

Toolbar Example

About This Example

Example

Accessibility Features

Keyboard Features

Focus Styling

Button Popup Labels

Keyboard Support

Toolbar

Toggle Buttons (Bold, Italic, Underline)

Radio Group (Text Alignment)

Button (Cut, Copy, Paste)

Menu Button (Font Family)

Menu (Font Family)

Spin Button (Font Size)

Checkbox (Night Mode)

Link (Help)

Role, Property, State, and Tabindex Attributes

Toolbar

Toggle Buttons (Bold, Italic, Underline)

Radio Group (Text Alignment)

Button (Cut, Copy, Paste)

Menu Button (Font Family)

Menu (Font Family)

Spin Button (Font Size)

JavaScript and CSS Source Code

HTML Source Code