Navigation Menubar Example: Improve high contrast support and refacto…

…r javascript (pull #1359)

closes issue #1357 by making the following changes:
* Updated javascript to use a single object.
* Updated CSS and JS to improve high contrast support.

Co-authored-by: Matt King <[email protected]>

aria-practices.html

@@ -1935,8 +1935,8 @@ <h3>Menu or Menu bar</h3>
       <section class="notoc">
         <h4>Examples</h4>
         <ul>
-          <li><a href="examples/menubar/menubar-1/menubar-1.html">Navigation Menubar Example</a>: Demonstrates a menubar that provides site navigation.</li>
-          <li><a href="examples/menubar/menubar-2/menubar-2.html">Editor Menubar Example</a>: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.</li>
+          <li><a href="examples/menubar/menubar-navigation.html">Navigation Menubar Example</a>: Demonstrates a menubar that provides site navigation.</li>
+          <li><a href="examples/menubar/menubar-editor.html">Editor Menubar Example</a>: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.</li>
         </ul>
       </section>
 

examples/disclosure/disclosure-navigation.html

@@ -38,7 +38,7 @@ <h1>Example Disclosure for Navigation Menus</h1>
   <ul>
     <li><a href="disclosure-faq.html">Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></li>
     <li><a href="disclosure-img-long-description.html">Example Disclosure (Show/Hide) for an Image Description</a></li>
-    <li><a href="../menubar/menubar-1/menubar-1.html">Navigation Menubar Example</a></li> 
+    <li><a href="../menubar/menubar-navigation.html">Navigation Menubar Example</a></li>
   </ul>
   <h2>Example Usage Options</h2>
   <p>
@@ -47,9 +47,9 @@ <h2>Example Usage Options</h2>
   </p>
   <label for="arrow-behavior-switch">
     <input type="checkbox" id="arrow-behavior-switch" checked>
-    Include optional support for arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd> 
+    Include optional support for arrow keys, <kbd>Home</kbd>, and <kbd>End</kbd>
   </label>
-  
+
   <section>
     <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of" ></div>

examples/menubar/css/menubar-navigation.css

@@ -0,0 +1,121 @@
+.menubar-navigation {
+  margin: 0;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding: 7px;
+  font-size: 110%;
+  list-style: none;
+  background-color: #eee;
+  border: #eee solid 1px;
+  border-radius: 5px;
+}
+
+.menubar-navigation li {
+  margin: 0;
+  padding: 0;
+  border: 0 solid black;
+  list-style: none;
+}
+
+.menubar-navigation > li {
+  display: inline-block;
+  position: relative;
+}
+
+.menubar-navigation > li  li  {
+  display: block;
+}
+
+.menubar-navigation [role="menu"] [role="menuitem"],
+.menubar-navigation [role="menu"] [role="separator"] {
+  display: block;
+  width: 12em;
+  margin: 0;
+}
+
+.menubar-navigation [role="menuitem"],
+.menubar-navigation [role="separator"] {
+  padding: 6px;
+  background-color: #eee;
+  border: 0px solid #eee;
+  color: black;
+  border-radius: 5px;
+}
+
+.menubar-navigation [role="menuitem"] svg {
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+.menubar-navigation [role="menuitem"] svg.down {
+  padding-left: 0.125em;
+}
+
+.menubar-navigation [role="menuitem"] svg.right {
+  position: absolute;
+  padding-top: 0.35em;
+  right: 0.75em;
+}
+
+.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.down {
+  transform: rotate(180deg);
+}
+
+.menubar-navigation [role="menuitem"][aria-expanded="true"] svg.right {
+  transform: rotate(90deg) translate(5px, -5px);
+}
+
+.menubar-navigation > li > [role="menuitem"] {
+  display: inline-block;
+}
+
+.menubar-navigation [role="menu"] {
+  display: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+}
+
+.menubar-navigation [role="group"] {
+  margin: 0;
+  padding: 0;
+}
+
+.menubar-navigation [role="menu"]  {
+  display: none;
+}
+
+.menubar-navigation [role="separator"] {
+  padding-top: 3px;
+  background-image: url('../images/separator.svg');
+  background-position: center;
+  background-repeat: repeat-x;
+}
+
+/* focus styling */
+
+.menubar-navigation.focus {
+  padding: 6px;
+  border: #034575 solid 2px;
+}
+
+.menubar-navigation [role="menu"] {
+  padding: 7px 4px;
+  border: 2px solid #034575;
+  border-radius: 5px;
+  background-color: #eee;
+}
+
+.menubar-navigation [role="menuitem"][aria-expanded="true"],
+.menubar-navigation [role="menuitem"]:focus,
+.menubar-navigation [role="menuitem"]:hover {
+  background: #034575;
+  color: #fff;
+  outline: none;
+}
+
+.menubar-navigation [role="menuitem"]:focus,
+.menubar-navigation [role="menuitem"]:hover {
+  padding: 2px;
+  border: 4px solid #034575;
+}