Editor Menubar Example

NOTE: Please provide feedback on this example in issue 144.

The following example demonstrates using the menubar design pattern to provide access to sets of actions. Each item in this example menubar represents a category of text formatting commands. The formatting commands are revealed in popup menus that can be opened from items in the menubar. This example also demonstrates menuitemradio and menuitemcheckbox elements.

Similar examples include:

Example


More information on Gettysburg Address

Notes

  1. Menu radio buttons and checkboxes indicate the current format settings.
  2. Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems .
  3. CSS :after is used to render the down arrow in a menubar item using the CSS content property string using entity values.
  4. CSS :before is used to render checks using the CSS content property string using entity values on menuritemadio and menuitemcheckbox items.

Keyboard Support

Menubar

Key Function
Space or Enter Opens popup menu and places focus on the first item in the popup.
Right Arrow
  • Moves focus to the next item in the menubar.
  • If focus is on the last item, moves focus to the first item.
Left Arrow
  • Moves focus to the previous item in the menubar.
  • If focus is on the first item, moves focus to the last item.
Down Arrow Opens popup menu and places focus on the first item in the popup.
Up Arrow Opens popup menu and places focus on the last item in the popup.
Home Moves focus to first item in the menubar.
End Moves focus to last item in the menubar.
Character
  • Moves focus to next item in the menubar having a name that starts with the typed character.
  • If none of the items have a name starting with the typed character, focus does not move.

Popup

Key Function
Space or Enter
  • Executes action or command, e.g., bolds text, change font.
  • Implements optional behavior of a popup menu staying open after activating a menuitemradio or menuitemcheckbox. This allows for users to visually see the change in state before they close the popup menu with an additional keyboard command.
Escape
  • Closes popup menu.
  • Places focus on parent menubar item.
Right Arrow
  • Closes popup menu.
  • Moves focus to next item in the menubar.
  • Opens popup menu for newly focused item, leaving focus in the menubar.
Left Arrow
  • Closes popup menu.
  • Moves focus to previous item in the menubar.
  • Opens popup menu for newly focused item, leaving focus in the menubar.
Down Arrow
  • Moves focus to the next item in the popup.
  • If focus is on the last item, moves focus to the first item.
Up Arrow
  • Moves focus to previous item in the popup.
  • If focus is on the first item, moves focus to the last item.
Home Moves focus to the first item in the popup.
End Moves focus to the last item in the popup.
Character
  • Moves focus to the next item having a name that starts with the typed character.
  • If none of the items have a name starting with the typed character, focus does not move.

Role, Property, State, and Tabindex Attributes

Menubar

Role Attribute Element Usage
menubar ul
  • Identifies the ul element as a container for set of menuitem widgets associated with the menubar.
  • Is not focusable because focus is managed using roving tabindex,
aria-label="string" ul
  • Defines an acessible name for the menubar.
  • Helps assistive technology users understand the purpose of the menubar and distinguish it from any other menubars or similar elements on the page.
menuitem li Identifies the li element as a menu item within the menubar widget.
aria-label="string" li
  • Defines an acessible name for the menuitem.
  • Overrides browser calculation of accessible name from inner text of all descendants, which includes all the popup menu item names.
tabindex="-1" li Makes the menuitem element keyboard focusable but not part of the Tab sequence of the page.
tabindex="0" li
  • Makes the menuitem element keyboard focusable and part of the tab sequence of the page.
  • Only one menuitem in the menubar has tabindex="0".
  • When the page loads, the first item in the menubar has tabindex="0".
  • Focus is managed using roving tabindex, so the most recently focused item will be in the page Tab sequence.
aria-haspopup="true" li Identifies the menuitem as having a child popup menu.
aria-expanded="true" li Indicates the child popup menu is open.
aria-expanded="false" li Indicates the child popup menu is closed.

Popup Menu

Role Attribute Element Usage
menu ul
  • Identifies the ul element as a container for set of menuitem widgets associated with the menu.
  • Is not focusable because focus is managed using roving tabindex,
aria-label="string" ul Defines an acessible name for the menu.
menuitem li Identifies the li element as a menu item in the popup menu.
tabindex="-1" li Makes the item focusable but not part of the page tab sequence.
menuitemcheckbox li Identifies the li element as a menuitemcheckbox widget.
tabindex="-1" li Makes the menuitemcheckbox focusable but not part of the page tab sequence.
aria-checked="true" li
  • Indicates that the menuitemcheckbox is checked.
  • The visual state of the selection is synchronized with the aria-checked value using CSS attribute selectors, e.g., [aria-checked="true"], the CSS pseudo selector :before, and the content property.
aria-checked="false" li
  • Indicates that the menuitemcheckbox is NOT checked.
  • The visual state of the selection is synchronized with the aria-checked value using CSS attribute selectors, e.g., [aria-checked="true"], the CSS pseudo selector :before, and the content property.
group ul
  • Identifies the ul element as a container for a set of menuitemradio widgets.
  • Enables browsers to compute values of aria-setsize and aria-posinset.
menuitemradio li
  • Identifies the li element as a menuitemradio widget.
  • In this example the menuitemradio group is defined by either ul[role="menu"] or [role="group"].
tabindex="-1" li Makes the menuitemradio focusable but not part of the page tab sequence.
aria-checked="true" li
  • Indicates the menuitemradio is checked.
  • The visual state of the selection is synchronized with the aria-checked value using CSS attribute selectors, e.g., [aria-checked="true"], the CSS pseudo selector :before, and the content property.
aria-checked="false" li
  • Indicates that the menuitemradio is NOT checked.
  • The visual state of the selection is synchronized with the aria-checked value using CSS attribute selectors, e.g., [aria-checked="true"], the CSS pseudo selector :before, and the content property.

Javascript and CSS Source Code

HTML Source Code