Menu button examples: Improve High Contrast Support and consistency w…

…ith APG Coding Practices (pull #1401)

Updated three menu button examples to:
* Improve Javascript coding; use key  rather than keyCode  in keyboard events; use a single object; use classes instead of prototypes.
* Improve high contrast support and documentation.

Co-authored-by: Valerie Young <[email protected]>
Co-authored-by: Matt King <[email protected]>
Co-authored-by: Carolyn MacLeod <[email protected]>

examples/menu-button/css/menu-button-actions.css

@@ -0,0 +1,82 @@
+.menu-button-actions {
+  margin: 0;
+  padding: 0;
+}
+
+.menu-button-actions button {
+  margin: 0;
+  padding: 6px;
+  display: inline-block;
+  position: relative;
+  background-color: #034575;
+  border: 1px solid #034575;
+  font-size: 0.9em;
+  color: white;
+  border-radius: 5px;
+}
+
+.menu-button-actions [role="menu"] {
+  display: none;
+  position: absolute;
+  margin: 0;
+  padding: 7px 4px;
+  border: 2px solid #034575;
+  border-radius: 5px;
+  background-color: #eee;
+}
+
+.menu-button-actions [role="menuitem"],
+.menu-button-actions [role="separator"] {
+  margin: 0;
+  padding: 6px;
+  display: block;
+  width: 4em;
+  background-color: #eee;
+  color: black;
+  border-radius: 5px;
+}
+
+.menu-button-actions [role="separator"] {
+  padding-top: 3px;
+  background-image: url("../images/separator.svg");
+  background-position: center;
+  background-repeat: repeat-x;
+}
+
+.menu-button-actions button svg.down {
+  padding-left: 0.125em;
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+.menu-button-actions button[aria-expanded="true"] svg.down {
+  transform: rotate(180deg);
+}
+
+/* focus styling */
+
+.menu-button-actions button:hover,
+.menu-button-actions button:focus,
+.menu-button-actions button[aria-expanded="true"] {
+  padding: 4px;
+  border: 3px solid #034575;
+  background: #eee;
+  color: #222;
+  outline: none;
+  margin: 0;
+}
+
+.menu-button-actions [role="menuitem"].focus,
+.menu-button-actions [role="menuitem"]:focus {
+  padding: 4px;
+  border: 2px solid #034575;
+  background: #034575;
+  color: #fff;
+  outline: none;
+  margin: 0;
+}
+
+input.action:focus {
+  outline: 2px solid #034575;
+  background: #def;
+}

examples/menu-button/css/menu-button-links.css

@@ -0,0 +1,78 @@
+.menu-button-links {
+  margin: 0;
+  font-size: 110%;
+}
+
+.menu-button-links button {
+  margin: 0;
+  padding: 6px;
+  display: inline-block;
+  position: relative;
+  background-color: #034575;
+  border: 1px solid #034575;
+  font-size: 0.9em;
+  color: white;
+  border-radius: 5px;
+}
+
+.menu-button-links [role="menu"] {
+  margin: 0;
+  padding: 7px 4px;
+  list-style: none;
+  display: none;
+  position: absolute;
+  border: 2px solid #034575;
+  border-radius: 5px;
+  background-color: #eee;
+}
+
+.menu-button-links [role="menuitem"],
+.menu-button-links [role="separator"] {
+  margin: 0;
+  padding: 6px;
+  display: block;
+  width: 24em;
+  background-color: #eee;
+  border: none;
+  color: black;
+  border-radius: 5px;
+}
+
+.menu-button-links [role="separator"] {
+  padding-top: 3px;
+  background-image: url("../images/separator.svg");
+  background-position: center;
+  background-repeat: repeat-x;
+}
+
+.menu-button-links button svg.down {
+  padding-left: 0.125em;
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+.menu-button-links button[aria-expanded="true"] svg.down {
+  transform: rotate(180deg);
+}
+
+/* focus styling */
+
+.menu-button-links button:hover,
+.menu-button-links button:focus,
+.menu-button-links button[aria-expanded="true"] {
+  padding: 4px;
+  border: 3px solid #034575;
+  background: #eee;
+  color: #222;
+  outline: none;
+  margin: 0;
+}
+
+.menu-button-links [role="menuitem"]:focus {
+  padding: 4px;
+  border: 2px solid #034575;
+  background: #034575;
+  color: #fff;
+  outline: none;
+  margin: 0;
+}