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

BoldItalicUnderline

Text Align LeftText Align CenterText Align Right

CopyPasteCut

SANS-SERIF

• Sans-serif
• Serif
• Monospace
• Fantasy
• Cursive

14pt

Night ModeHelp

Text Sample
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.

• 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.

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.

• 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.

Menu Button (Font Family)

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

Menu (Font Family)

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

• 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.

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.

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.

Role, Property, State, and Tabindex Attributes

Toolbar

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

• 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.

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 behavior, not styling, the alignment toggles implement the following ARIA attributes described in the Radio Group Pattern.

• 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.

Menu Button (Font Family)

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

• 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="false" | button | Indicates the menu is not displayed and that activating the menu button opens the menu. | | | aria-expanded="true" | button | Indicates the menu is displayed and that activating the menu button closes the menu. |

Menu (Font Family)

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

• 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.

• 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

HTML Source Code

To copy the following HTML code, please open it in CodePen.