Editor Menubar Example: Improve high contrast support and refactor Javascript (pull #1356)

Resolves issue #1355 for the editor menubar example by:
* Simplifying the Javascript code to use a single object.
* Replace PNG files with SVG.
* Improving high contrast support
* Makes corresponding editorial revisions to documentation.
* Fixes bug with testing space key.

Co-authored-by: Sarah Higley <[email protected]>
Co-authored-by: Matt King <[email protected]>
Co-authored-by: Valerie Young <[email protected]>

Author: 4 people

examples/menubar/css/menubar-editor.css

@@ -0,0 +1,183 @@
+.menubar-editor {
+  margin: 0;
+  padding: 2px;
+  width: 560px;
+}
+
+.menubar-editor.focus {
+  padding: 0;
+  border: solid 2px #034575;
+}
+
+.menubar-editor textarea {
+  padding: 4px;
+  margin: 0;
+  border: 2px solid #eee;
+  height: 400px;
+  width: 548px;
+  font-size: medium;
+  font-family: sans-serif;
+}
+
+.menubar-editor [role="menubar"] {
+  margin: 0;
+  padding: 2px;
+  border: 2px solid #eee;
+  font-size: 110%;
+  list-style: none;
+  background-color: #eee;
+  height: 32px;
+  display: block;
+}
+
+.menubar-editor [role="menubar"] li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.menubar-editor [role="menubar"] > li {
+  display: inline-block;
+  position: relative;
+  top: 3px;
+  left: 1px;
+}
+
+.menubar-editor [role="menubar"] > li > [role="menuitem"]::after {
+  content: url('../images/down-arrow.svg');
+  padding-left: 0.25em;
+}
+
+.menubar-editor [role="menubar"] > li > [role="menuitem"]:focus::after {
+  content: url('../images/down-arrow-focus.svg');
+}
+
+.menubar-editor [role="menubar"] > li > [role="menuitem"][aria-expanded="true"]::after {
+  content: url('../images/up-arrow-focus.svg');
+  }
+
+.menubar-editor [role="menubar"] [role="menu"] {
+  display: none;
+  margin: 0;
+  padding: 2px;
+  position: absolute;
+  border: 2px solid #034575;
+  background-color: #eee;
+}
+
+.menubar-editor [role="menubar"] [role="group"] {
+  margin: 0;
+  padding: 0;
+}
+
+.menubar-editor [role="menubar"] [role="menuitem"][aria-disabled="true"] {
+  color: #666;
+  text-decoration: line-through;
+}
+
+.menubar-editor [role="menubar"] [role="menuitem"],
+.menubar-editor [role="menubar"] [role="menuitemcheckbox"],
+.menubar-editor [role="menubar"] [role="menuitemradio"],
+.menubar-editor [role="menubar"] [role="separator"] {
+  padding: 6px;
+  background-color: #eee;
+  border: 0px solid #eee;
+  color: black;
+}
+
+.menubar-editor [role="menubar"] [role="menuitem"][aria-expanded="true"] {
+  padding: 4px;
+  border: 2px solid #034575;
+  background-color: #034575;
+  color: #fff;
+  outline: none;
+}
+
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"],
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"],
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"],
+.menubar-editor [role="menubar"] [role="menu"] [role="separator"] {
+  padding-left: 27px;
+  width: 8em;
+}
+
+.menubar-editor [role="menubar"] [role="separator"] {
+  padding-top: 3px;
+  background-image: url('../images/separator.svg');
+  background-position: center;
+  background-repeat: repeat-x;
+}
+
+.menubar-editor [role="menubar"] [role="menu"] [aria-checked='true'] {
+  padding: 6px;
+  padding-left: 8px;
+  padding-right: 18px;
+}
+
+.menubar-editor [role="menubar"] [role='menuitemradio'][aria-checked='true']::before {
+  content: url('../images/radio-checked.svg');
+  padding-right: 3px;
+}
+
+.menubar-editor [role="menubar"] [role='menuitemcheckbox'][aria-checked='true']::before {
+  content: url('../images/checkbox-checked.svg');
+  padding-right: 3px;
+}
+
+
+/* focus and hover styling */
+
+
+.menubar-editor [role="menubar"] [role="menuitem"]:focus,
+.menubar-editor [role="menubar"] [role="menuitemcheckbox"]:focus,
+.menubar-editor [role="menubar"] [role="menuitemradio"]:focus {
+  padding: 4px;
+  border: 2px solid #034575;
+  background-color: #034575;
+  color: #fff;
+  outline: none;
+}
+
+.menubar-editor [role="menubar"] [role='menuitemradio'][aria-checked='true']:focus::before {
+  content: url('../images/radio-checked-focus.svg');
+  padding-right: 3px;
+}
+
+.menubar-editor [role="menubar"] [role='menuitemcheckbox'][aria-checked='true']:focus::before {
+  content: url('../images/checkbox-checked-focus.svg');
+  padding-right: 3px;
+}
+
+
+.menubar-editor [role="menubar"] [role="menuitem"]:hover {
+  padding: 4px;
+  border: 2px solid #034575;
+}
+
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"]:focus,
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"]:focus,
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"]:focus {
+  padding-left: 25px;
+}
+
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitem"][aria-checked='true']:focus,
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitemcheckbox"][aria-checked='true']:focus,
+.menubar-editor [role="menubar"] [role="menu"] [role="menuitemradio"][aria-checked='true']:focus {
+  padding-left: 8px;
+  padding-right: 21px;
+}
+
+/*
+* Text area styles
+*/
+.menubar-editor .italic {
+  font-style: italic;
+}
+
+.menubar-editor .bold {
+  font-weight: bold;
+}
+
+.menubar-editor .underline {
+  text-decoration: underline;
+}