Editor Menubar Example: Improve Editorial Consistency and Fix Broken Links

For issue #144, made the following changes to the editor menubar example in examples/menubar/menubar-2/menubar-2.html.

1. Clarified and simplified introduction.
2. Moved Notes from example section in to a separate accessibility features section to be consistent with the example template.
3. Removed use of term "popup" and used "submenu" as agreed in issue #268.
4. Editorial revisions to keyboard tables.
5. Editorial revisions to role, state, and property tables.
6. Fix broken links to source files.

Author: mcking65

examples/menubar/menubar-2/menubar-2.html

@@ -11,10 +11,9 @@
   <script src="../../js/highlight.pack.js"></script>
   <script src="../../js/app.js"></script>
 
+  <!--  CSS and javascript for this example.  -->
   <link href="css/menubarAction.css" rel="stylesheet">
-
   <script src="js/styleManager.js"    type="text/javascript"></script>
-
   <script src="js/MenubarAction.js"       type="text/javascript"></script>
   <script src="js/MenubarItemAction.js"   type="text/javascript"></script>
   <script src="js/PopupMenuAction.js"     type="text/javascript"></script>
@@ -32,14 +31,12 @@ <h1>Editor Menubar Example</h1>
     The following example demonstrates using the
     <a href="../../../#menu">menubar design pattern</a>
     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 <code>menuitemradio</code> and <code>menuitemcheckbox</code> 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 <code>menuitemradio</code> and <code>menuitemcheckbox</code> elements.
   </p>
-
   <p>Similar examples include: </p>
   <ul>
-    <li><a href="../menubar-1/menubar-1.html">Navigation Menubar Example</a>: Example of a menubar with popup menus with navigational links.</li>
+    <li><a href="../menubar-1/menubar-1.html">Navigation Menubar Example</a>: A menubar that presents site navigation menus.</li>
   </ul>
 
   <section id="code-ex-1">
@@ -126,18 +123,19 @@ <h2 id="ex1_label">Example</h2>
 
     </div>
     <div role="separator" id="ex1_end_sep" aria-labelledby="ex1_end_sep ex1_label" aria-label="End of" ></div>
-    <h4>Notes</h4>
+  </section>
+
+  <section>
+    <h2>Accessibility Features</h2>
     <ol>
-      <li>Menu radio buttons and checkboxes indicate the current format settings.</li>
+      <li>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.</li>
       <li>Disabled menu items are demonstrated in the font size menu, which  includes two disabled menuitems        .</li>
-      <li>CSS <code>:after</code> is used to render the down arrow in a menubar item using the CSS <code>content</code> property string using entity values.</li>
-      <li>CSS <code>:before</code> is used to render checks using the CSS <code>content</code> property string using entity values on <code>menuritemadio</code> and <code>menuitemcheckbox</code> items.</li>
+      <li>The down arrow and checked icons are made compatible with high contrast mode and hidden from screen readers by using the CSS <code>content</code> property to render images.</li>
     </ol>
   </section>
-
+  
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-
     <h3 id="kbd1_label">Menubar</h3>
     <table aria-labelledby="kbd1_label kbd_label" class="def">
       <thead>
@@ -149,9 +147,9 @@ <h3 id="kbd1_label">Menubar</h3>
       <tbody>
         <tr>
           <th>
-            <kbd>Space or Enter</kbd>
+            <kbd>Space</kbd><br><kbd>Enter</kbd>
           </th>
-          <td>Opens popup menu and places focus on the first item in the popup.</td>
+          <td>Opens submenu and moves focus to first item in the submenu.</td>
         </tr>
         <tr>
           <th>
@@ -179,13 +177,13 @@ <h3 id="kbd1_label">Menubar</h3>
           <th>
             <kbd>Down Arrow</kbd>
           </th>
-          <td>Opens popup menu and places focus on the first item in the popup.</td>
+          <td>Opens submenu and moves focus to first item in the submenu.</td>
         </tr>
         <tr>
           <th>
             <kbd>Up Arrow</kbd>
           </th>
-          <td>Opens popup menu and places focus on the last item in the popup.</td>
+          <td>Opens submenu and moves focus to last item in the submenu.</td>
         </tr>
         <tr>
           <th>
@@ -213,7 +211,7 @@ <h3 id="kbd1_label">Menubar</h3>
       </tbody>
     </table>
 
-    <h3 id="kbd2_label">Popup</h3>
+    <h3 id="kbd2_label">Submenu</h3>
     <table aria-labelledby="kbd2_label kbd_label" class="def">
       <thead>
         <tr>
@@ -224,23 +222,18 @@ <h3 id="kbd2_label">Popup</h3>
       <tbody>
         <tr>
           <th>
-            <kbd>Space or Enter</kbd>
+            <kbd>Space</kbd><br><kbd>Enter</kbd>
           </th>
-          <td>
-            <ul>
-              <li>Executes action or command, e.g., bolds text, change font.</li>
-              <li>Implements optional behavior of a popup menu staying open after activating a <code>menuitemradio</code> or <code>menuitemcheckbox</code>.  This allows for users to visually see the change in state before they close the popup menu with an additional keyboard command.</li>
-            </ul>
-        </td>
+          <td>Activates menu item, causing action to be executed, e.g., bold text, change font. </td>
         </tr>
         <tr>
           <th>
             <kbd>Escape</kbd>
           </th>
           <td>
             <ul>
-              <li>Closes popup menu.</li>
-              <li>Places focus on parent menubar item.</li>
+              <li>Closes submenu.</li>
+              <li>Moves focus to parent menubar item.</li>
             </ul>
           </td>
         </tr>
@@ -250,9 +243,9 @@ <h3 id="kbd2_label">Popup</h3>
           </th>
           <td>
             <ul>
-              <li>Closes popup menu.</li>
+              <li>Closes submenu.</li>
               <li>Moves focus to next item in the menubar.</li>
-              <li>Opens popup menu for newly focused item, leaving focus in the menubar.</li>
+              <li>Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.</li>
             </ul>
           </td>
         </tr>
@@ -262,9 +255,9 @@ <h3 id="kbd2_label">Popup</h3>
           </th>
           <td>
             <ul>
-              <li>Closes popup menu.</li>
+              <li>Closes submenu.</li>
               <li>Moves focus to previous item in the menubar.</li>
-              <li>Opens popup menu for newly focused item, leaving focus in the menubar.</li>
+              <li>Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.</li>
             </ul>
           </td>
         </tr>
@@ -274,7 +267,7 @@ <h3 id="kbd2_label">Popup</h3>
           </th>
           <td>
             <ul>
-              <li>Moves focus to the next item in the popup.</li>
+              <li>Moves focus to the next item in the submenu.</li>
               <li>If focus is on the last item, moves focus to the first item.</li>
             </ul>
           </td>
@@ -285,7 +278,7 @@ <h3 id="kbd2_label">Popup</h3>
           </th>
           <td>
             <ul>
-              <li>Moves focus to previous item in the popup.</li>
+              <li>Moves focus to previous item in the submenu.</li>
               <li>If focus is on the first item, moves focus to the last item.</li>
             </ul>
           </td>
@@ -294,13 +287,13 @@ <h3 id="kbd2_label">Popup</h3>
           <th>
             <kbd>Home</kbd>
           </th>
-          <td>Moves focus to the first item in the popup.</td>
+          <td>Moves focus to the first item in the submenu.</td>
         </tr>
         <tr>
           <th>
             <kbd>End</kbd>
           </th>
-          <td>Moves focus to the last item in the popup.</td>
+          <td>Moves focus to the last item in the submenu.</td>
         </tr>
         <tr>
           <th>
@@ -319,7 +312,6 @@ <h3 id="kbd2_label">Popup</h3>
 
     <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-
       <h3 id="rps1_label">Menubar</h3>
       <table aria-labelledby="rps1_label rps_label" class="data attributes">
         <thead>
@@ -341,12 +333,8 @@ <h3 id="rps1_label">Menubar</h3>
             </td>
             <td>
               <ul>
-                <li>
-                  Identifies the <code>ul</code> element as a container for set of <code>menuitem</code> widgets associated with the menubar.
-                </li>
-                <li>
-                  Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>,
-                </li>
+                <li>Identifies the element as a <code>menubar</code> container for a set of <code>menuitem</code> elements.</li>
+                <li>Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex.</a></li>
               </ul>
             </td>
           </tr>
@@ -378,7 +366,7 @@ <h3 id="rps1_label">Menubar</h3>
               <code>li</code>
             </td>
             <td>
-              Identifies the <code>li</code> element as a menu item within the menubar widget.
+              Identifies the element as a menu item within the menubar.
             </td>
           </tr>
           <tr>
@@ -415,8 +403,7 @@ <h3 id="rps1_label">Menubar</h3>
                   When the page loads, the first item in the menubar has <code>tabindex=&quot;0&quot;</code>.
                 </li>
                 <li>
-                  Focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>,
-                  so the most recently focused item will be in the page <kbd>Tab</kbd> sequence.
+                  Focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>.
                 </li>
               </ul>
             </td>
@@ -430,7 +417,7 @@ <h3 id="rps1_label">Menubar</h3>
               <code>li</code>
             </td>
             <td>
-              Identifies the <code>menuitem</code> as having a child popup menu.
+              Indicates that the <code>menuitem</code> has a submenu.
             </td>
           </tr>
           <tr>
@@ -442,7 +429,7 @@ <h3 id="rps1_label">Menubar</h3>
               <code>li</code>
             </td>
             <td>
-              Indicates the child popup menu is open.
+              Indicates the submenu is open.
             </td>
           </tr>
           <tr>
@@ -454,13 +441,12 @@ <h3 id="rps1_label">Menubar</h3>
               <code>li</code>
             </td>
             <td>
-              Indicates the child popup menu is closed.
+              Indicates the submenu is closed.
             </td>
           </tr>
         </tbody>
       </table>
-
-      <h3 id="rps2_label">Popup Menu</h3>
+      <h3 id="rps2_label">Submenu</h3>
       <table aria-labelledby="rps2_label rps_label" class="data attributes">
       <thead>
         <tr>
@@ -482,10 +468,10 @@ <h3 id="rps2_label">Popup Menu</h3>
           <td>
             <ul>
               <li>
-                Identifies the <code>ul</code> element as a container for set of <code>menuitem</code> widgets associated with the menu.
+                Identifies the element as a menu container for a set of <code>menuitem</code> elements.
               </li>
               <li>
-                Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>,
+                Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex.</a>
               </li>
             </ul>
           </td>
@@ -511,7 +497,7 @@ <h3 id="rps2_label">Popup Menu</h3>
             <code>li</code>
           </td>
           <td>
-            Identifies the <code>li</code> element as a menu item in the popup menu.
+            Identifies the element as an item in the submenu.
           </td>
         </tr>
         <tr>
@@ -535,7 +521,7 @@ <h3 id="rps2_label">Popup Menu</h3>
             <code>li</code>
           </td>
           <td>
-            Identifies the <code>li</code> element as a menuitemcheckbox widget.
+            Identifies the element as a <code>menuitemcheckbox</code>.
           </td>
         </tr>
         <tr>
@@ -564,10 +550,7 @@ <h3 id="rps2_label">Popup Menu</h3>
                 Indicates that the <code>menuitemcheckbox</code> is checked.
               </li>
               <li>
-                The visual state of the selection is synchronized with the <code>aria-checked</code>
-                value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
-                 the CSS pseudo selector <code>:before</code>,
-                 and the <code>content</code> property.
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
               </li>
             </ul>
           </td>
@@ -586,10 +569,7 @@ <h3 id="rps2_label">Popup Menu</h3>
                 Indicates that the <code>menuitemcheckbox</code> is <strong>NOT</strong> checked.
               </li>
               <li>
-                The visual state of the selection is synchronized with the <code>aria-checked</code>
-                value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
-                 the CSS pseudo selector <code>:before</code>,
-                 and the <code>content</code> property.
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
               </li>
             </ul>
           </td>
@@ -605,7 +585,7 @@ <h3 id="rps2_label">Popup Menu</h3>
           <td>
             <ul>
               <li>
-                Identifies the <code>ul</code> element as a container for a set of <code>menuitemradio</code> widgets.
+                Identifies the element as a container for a set of <code>menuitemradio</code> elements.
               </li>
               <li>
                 Enables browsers to compute values of <code>aria-setsize</code> and <code>aria-posinset</code>.
@@ -624,11 +604,11 @@ <h3 id="rps2_label">Popup Menu</h3>
           <td>
             <ul>
               <li>
-                Identifies the <code>li</code> element as a <code>menuitemradio</code> widget.
+                Identifies the element as a <code>menuitemradio</code> element.
               </li>
               <li>
-                In this example the menuitemradio group is defined by either <code>ul[role=&quot;menu&quot;]</code>
-                or <code>[role=&quot;group&quot;]</code>.
+                When all items in a submenu are members of the same radio group,
+                the group is defined by the <code>menu</code> element; a <code>group</code> element is not necessary.
               </li>
             </ul>
           </td>
@@ -659,10 +639,7 @@ <h3 id="rps2_label">Popup Menu</h3>
                 Indicates the  <code>menuitemradio</code> is checked.
               </li>
               <li>
-                The visual state of the selection is synchronized with the <code>aria-checked</code>
-                value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
-                 the CSS pseudo selector <code>:before</code>,
-                 and the <code>content</code> property.
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
               </li>
             </ul>
           </td>
@@ -681,10 +658,7 @@ <h3 id="rps2_label">Popup Menu</h3>
                 Indicates that  the <code>menuitemradio</code> is <strong>NOT</strong> checked.
               </li>
               <li>
-                The visual state of the selection is synchronized with the <code>aria-checked</code>
-                value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
-                 the CSS pseudo selector <code>:before</code>,
-                 and the <code>content</code> property.
+                The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
               </li>
             </ul>
           </td>
@@ -710,10 +684,10 @@ <h2>Javascript and CSS Source Code</h2>
         Javascript: <a href="js/PopupMenuAction.js" type="text/javascript">PopupMenuAction.js</a>
       </li>
       <li>
-        Javascript: <a href="js/MenuItemAction.js" type="text/javascript">MenuItemAction.js</a>
+        Javascript: <a href="js/PopupMenuItemAction.js" type="text/javascript">PopupMenuItemAction.js</a>
       </li>
       <li>
-            Javascript: <a href="js/TextStyling.js" type="text/javascript">TextStyling.js</a>
+            Javascript: <a href="js/styleManager.js" type="text/javascript">styleManager.js</a>
       </li>
     </ul>
   </section>