diff --git a/examples/menubar/menubar-2/menubar-2.html b/examples/menubar/menubar-2/menubar-2.html index 2ab32b71fc..11073f9751 100644 --- a/examples/menubar/menubar-2/menubar-2.html +++ b/examples/menubar/menubar-2/menubar-2.html @@ -11,10 +11,9 @@ + - - @@ -32,14 +31,12 @@

Editor Menubar Example

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. + Each item in the below menubar identifies a category of text formatting actions that can be executed from its submenu. + The submenus also demonstrate menuitemradio and menuitemcheckbox elements.

-

Similar examples include:

@@ -126,18 +123,19 @@

Example

-

Notes

+
+ +
+

Accessibility Features

    -
  1. Menu radio buttons and checkboxes indicate the current format settings.
  2. +
  3. Users of assistive technologies can identify which format settings are selected because they are represented by menu item radio and menu item checkbox elements that have a checked state.
  4. Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems .
  5. -
  6. CSS :after is used to render the down arrow in a menubar item using the CSS content property string using entity values.
  7. -
  8. CSS :before is used to render checks using the CSS content property string using entity values on menuritemadio and menuitemcheckbox items.
  9. +
  10. The down arrow and checked icons are made compatible with high contrast mode and hidden from screen readers by using the CSS content property to render images.
- +

Keyboard Support

-

Menubar

@@ -149,9 +147,9 @@

Menubar

- + - + - +
- Space or Enter + Space
Enter
Opens popup menu and places focus on the first item in the popup.Opens submenu and moves focus to first item in the submenu.
@@ -179,13 +177,13 @@

Menubar

Down Arrow Opens popup menu and places focus on the first item in the popup.Opens submenu and moves focus to first item in the submenu.
Up Arrow Opens popup menu and places focus on the last item in the popup.Opens submenu and moves focus to last item in the submenu.
@@ -213,7 +211,7 @@

Menubar

-

Popup

+

Submenu

@@ -224,14 +222,9 @@

Popup

- + @@ -250,9 +243,9 @@

Popup

@@ -262,9 +255,9 @@

Popup

@@ -274,7 +267,7 @@

Popup

@@ -285,7 +278,7 @@

Popup

@@ -294,13 +287,13 @@

Popup

- + - +
- Space or Enter + Space
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.
  • -
-
Activates menu item, causing action to be executed, e.g., bold text, change font.
@@ -239,8 +232,8 @@

Popup

    -
  • Closes popup menu.
  • -
  • Places focus on parent menubar item.
  • +
  • Closes submenu.
  • +
  • Moves focus to parent menubar item.
    -
  • Closes popup menu.
  • +
  • Closes submenu.
  • Moves focus to next item in the menubar.
  • -
  • Opens popup menu for newly focused item, leaving focus in the menubar.
  • +
  • Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.
    -
  • Closes popup menu.
  • +
  • Closes submenu.
  • Moves focus to previous item in the menubar.
  • -
  • Opens popup menu for newly focused item, leaving focus in the menubar.
  • +
  • Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.
    -
  • Moves focus to the next item in the popup.
  • +
  • Moves focus to the next item in the submenu.
  • If focus is on the last item, moves focus to the first item.
    -
  • Moves focus to previous item in the popup.
  • +
  • Moves focus to previous item in the submenu.
  • If focus is on the first item, moves focus to the last item.
Home Moves focus to the first item in the popup.Moves focus to the first item in the submenu.
End Moves focus to the last item in the popup.Moves focus to the last item in the submenu.
@@ -319,7 +312,6 @@

Popup

Role, Property, State, and Tabindex Attributes

-

Menubar

@@ -341,12 +333,8 @@

Menubar

@@ -378,7 +366,7 @@

Menubar

li @@ -415,8 +403,7 @@

Menubar

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. + Focus is managed using roving tabindex.
  • @@ -430,7 +417,7 @@

    Menubar

    li @@ -442,7 +429,7 @@

    Menubar

    li @@ -454,13 +441,12 @@

    Menubar

    li
      -
    • - 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, -
    • +
    • Identifies the element as a menubar container for a set of menuitem elements.
    • +
    • Is not focusable because focus is managed using roving tabindex.
    - Identifies the li element as a menu item within the menubar widget. + Identifies the element as a menu item within the menubar.
    - Identifies the menuitem as having a child popup menu. + Indicates that the menuitem has a submenu.
    - Indicates the child popup menu is open. + Indicates the submenu is open.
    - Indicates the child popup menu is closed. + Indicates the submenu is closed.
    - -

    Popup Menu

    +

    Submenu

    @@ -482,10 +468,10 @@

    Popup Menu

    @@ -511,7 +497,7 @@

    Popup Menu

    li @@ -535,7 +521,7 @@

    Popup Menu

    li @@ -564,10 +550,7 @@

    Popup Menu

    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. + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors.
  • @@ -586,10 +569,7 @@

    Popup Menu

    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. + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors.
  • @@ -605,7 +585,7 @@

    Popup Menu

    @@ -659,10 +639,7 @@

    Popup Menu

    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. + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors.
  • @@ -681,10 +658,7 @@

    Popup Menu

    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. + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors.
  • @@ -710,10 +684,10 @@

    Javascript and CSS Source Code

    Javascript: PopupMenuAction.js
  • - Javascript: MenuItemAction.js + Javascript: PopupMenuItemAction.js
  • - Javascript: TextStyling.js + Javascript: styleManager.js
    • - Identifies the ul element as a container for set of menuitem widgets associated with the menu. + Identifies the element as a menu container for a set of menuitem elements.
    • - Is not focusable because focus is managed using roving tabindex, + Is not focusable because focus is managed using roving tabindex.
    - Identifies the li element as a menu item in the popup menu. + Identifies the element as an item in the submenu.
    - Identifies the li element as a menuitemcheckbox widget. + Identifies the element as a menuitemcheckbox.
    • - Identifies the ul element as a container for a set of menuitemradio widgets. + Identifies the element as a container for a set of menuitemradio elements.
    • Enables browsers to compute values of aria-setsize and aria-posinset. @@ -624,11 +604,11 @@

      Popup Menu

    • - Identifies the li element as a menuitemradio widget. + Identifies the element as a menuitemradio element.
    • - In this example the menuitemradio group is defined by either ul[role="menu"] - or [role="group"]. + When all items in a submenu are members of the same radio group, + the group is defined by the menu element; a group element is not necessary.