menubar examples: removed keypress events and use images instead of e…

…ntities

* removed keypress events
* Updated to use images instead of entities for visual indicators of down arrow, right arrow and checked state 
* removed unused images
* updated example page notes to include information about using :before and :after CSS techniques for visual cues

examples/menubar/menubar-1/css/menubarLinks.css

@@ -45,7 +45,8 @@ ul[role="menubar"] > li {
 }
 
 ul[role="menubar"] > li > a:after {
-  content: url('../images/pull-down-menu-icon.png');
+  content: url('../images/down-arrow-brown.png');
+  padding-left: .25em;
 }
 
 
@@ -61,8 +62,10 @@ ul[role="menubar"] ul[role="menu"] {
 
 ul[role="menubar"] ul[role="menu"] li a {
   display: block;
+  width: 10em;
 }
 
 ul[role="menubar"] ul[role="menu"] a[aria-haspopup="true"]:after {
-  content: " >";
+  content: url('../images/right-arrow-brown.png');
+  padding-right: 2em;
 }

examples/menubar/menubar-1/js/MenubarItemLinks.js

@@ -73,7 +73,6 @@ MenubarItem.prototype.init = function () {
   }
 
   this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-  this.domNode.addEventListener('keypress', this.handleKeypress.bind(this));
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
@@ -93,9 +92,14 @@ MenubarItem.prototype.init = function () {
 
 MenubarItem.prototype.handleKeydown = function (event) {
   var tgt = event.currentTarget,
+      char = event.key,
       flag = false,
  clickEvent;
 
+  function isPrintableCharacter (str) {
+    return str.length === 1 && str.match(/\S/);
+  }
+
   switch (event.keyCode) {
     case this.keyCode.SPACE:
     case this.keyCode.RETURN:
@@ -138,6 +142,10 @@ MenubarItem.prototype.handleKeydown = function (event) {
       break;
 
     default:
+      if (isPrintableCharacter(char)) {
+        this.menubar.setFocusByFirstCharacter(this, char);
+        flag = true;
+      }
       break;
   }
 
@@ -147,18 +155,6 @@ MenubarItem.prototype.handleKeydown = function (event) {
   }
 };
 
-MenubarItem.prototype.handleKeypress = function (event) {
-  var char = String.fromCharCode(event.charCode);
-
-  function isPrintableCharacter (str) {
-    return str.length === 1 && str.match(/\S/);
-  }
-
-  if (isPrintableCharacter(char)) {
-    this.menubar.setFocusByFirstCharacter(this, char);
-  }
-};
-
 MenubarItem.prototype.handleClick = function (event) {
 };
 

examples/menubar/menubar-1/js/PopupMenuItemLinks.js

@@ -63,7 +63,6 @@ MenuItem.prototype.init = function () {
   }
 
   this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-  this.domNode.addEventListener('keypress', this.handleKeypress.bind(this));
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
@@ -89,11 +88,14 @@ MenuItem.prototype.isExpanded = function () {
 /* EVENT HANDLERS */
 
 MenuItem.prototype.handleKeydown = function (event) {
-  var tgt = event.currentTarget,
+  var tgt  = event.currentTarget,
+      char = event.key,
       flag = false,
- clickEvent;
+      clickEvent;
 
-  //  Console.log("[MenuItem][handleKeydown]: " + event.keyCode + " " + this.menu)
+  function isPrintableCharacter (str) {
+    return str.length === 1 && str.match(/\S/);
+  }
 
   switch (event.keyCode) {
     case this.keyCode.SPACE:
@@ -178,6 +180,10 @@ MenuItem.prototype.handleKeydown = function (event) {
       break;
 
     default:
+      if (isPrintableCharacter(char)) {
+        this.menu.setFocusByFirstCharacter(this, char);
+        flag = true;
+      }
       break;
   }
 
@@ -187,18 +193,6 @@ MenuItem.prototype.handleKeydown = function (event) {
   }
 };
 
-MenuItem.prototype.handleKeypress = function (event) {
-  var char = String.fromCharCode(event.charCode);
-
-  function isPrintableCharacter (str) {
-    return str.length === 1 && str.match(/\S/);
-  }
-
-  if (isPrintableCharacter(char)) {
-    this.menu.setFocusByFirstCharacter(this, char);
-  }
-};
-
 MenuItem.prototype.handleClick = function (event) {
   this.menu.setFocusToController();
   this.menu.close(true);

examples/menubar/menubar-1/menubar-1.html

@@ -149,7 +149,9 @@ <h4>Notes</h4>
           to easily see which elements the roles and properties need to be included.</li>
         <li>This is useful for people writing their own scripts to see which elements need
           roles and properties.</li>
-      </ol>
+        <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>:after</code> is used to render right arrow using the CSS <code>content</code> property string using entity values in pull down menu items that have sub-menus.</li>
+        </ol>
     </section>
     <section>
       <h3 id="ex2_label">Example 2: ARIA markup added dynamically</h3>

examples/menubar/menubar-2/css/menubarAction.css

@@ -17,6 +17,11 @@ ul[role="menubar"] > li {
   position: relative;
 }
 
+ul[role="menubar"] > li > span:after {
+  content: url('../images/down-arrow-brown.png');
+  padding-left: 0.25em;
+}
+
 ul[role="menubar"] ul[role="menu"] {
   display: none;
   position: absolute;
@@ -50,6 +55,7 @@ ul[role="menubar"] ul li[role="menuitemcheckbox"],
 ul[role="menubar"] ul li[role="menuitemradio"], 
 ul[role="menubar"] ul li[role="separator"] {
   padding-left: 1.5em;
+  width: 8em;
 }  
 
 
@@ -75,31 +81,17 @@ ul[role="menubar"] [role="menu"] [role="separator"]:hover {
 
 ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='true'],
 ul[role="menubar"] [role="menuitemradio"][aria-checked='true'] {
-  background-image: url('../images/checkmark.png');
-  background-repeat: no-repeat;
-  background-position: 0.1em 0.2em;
-}
-
-
-ul[role="menubar"] li[aria-checked='true']:hover,
-ul[role="menubar"] li[aria-checked='true']:focus {
-  background-image: url('../images/checkmark-inverse.png');
-  background-repeat: no-repeat;
-  background-position: 0.1em 0.2em;
+  padding-left: 0.5em;
 }
 
-
-ul[role="menubar"] ul[role="menuitem"] > span:after {
-/*  content: url('../images/pull-down-menu-icon.png'); */
-  content: " \25bc";
-  font-size: 80%;
-  color: gray;
+ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='true']:before,
+ul[role="menubar"] [role="menuitemradio"][aria-checked='true']:before {
+  content: url('../images/check-brown.png');
+  padding-right: 0.25em;
 }
 
 
 
-
-
 /*
 * Text area styles
 */

examples/menubar/menubar-2/js/MenuItemAction.js

@@ -53,7 +53,6 @@ MenuItem.prototype.init = function () {
   }
 
   this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-  this.domNode.addEventListener('keypress', this.handleKeypress.bind(this));
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
@@ -65,11 +64,14 @@ MenuItem.prototype.init = function () {
 /* EVENT HANDLERS */
 
 MenuItem.prototype.handleKeydown = function (event) {
-  var tgt = event.currentTarget,
+  var tgt  = event.currentTarget,
+      char = event.key,
       flag = false,
- clickEvent;
+      clickEvent;
 
-  //  console.log("[MenuItem][handleKeydown]: " + event.keyCode + " " + this.menu)
+  function isPrintableCharacter (str) {
+    return str.length === 1 && str.match(/\S/);
+  }
 
   switch (event.keyCode) {
     case this.keyCode.SPACE:
@@ -140,6 +142,10 @@ MenuItem.prototype.handleKeydown = function (event) {
       break;
 
     default:
+      if (isPrintableCharacter(char)) {
+        this.menu.setFocusByFirstCharacter(this, char);
+        flag = true;
+      }
       break;
   }
 
@@ -149,18 +155,6 @@ MenuItem.prototype.handleKeydown = function (event) {
   }
 };
 
-MenuItem.prototype.handleKeypress = function (event) {
-  var char = String.fromCharCode(event.charCode);
-
-  function isPrintableCharacter (str) {
-    return str.length === 1 && str.match(/\S/);
-  }
-
-  if (isPrintableCharacter(char)) {
-    this.menu.setFocusByFirstCharacter(this, char);
-  }
-};
-
 MenuItem.prototype.handleClick = function (event) {
   this.menu.setFocusToController();
   this.menu.close(true);

examples/menubar/menubar-2/js/MenubarItemAction.js

@@ -67,7 +67,6 @@ MenubarItemAction.prototype.init = function () {
   this.domNode.tabIndex = -1;
 
   this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-  this.domNode.addEventListener('keypress', this.handleKeypress.bind(this));
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
@@ -87,8 +86,13 @@ MenubarItemAction.prototype.init = function () {
 
 MenubarItemAction.prototype.handleKeydown = function (event) {
   var tgt = event.currentTarget,
+      char = event.key,
       flag = false,
- clickEvent;
+      clickEvent;
+
+  function isPrintableCharacter (str) {
+    return str.length === 1 && str.match(/\S/);
+  }
 
   switch (event.keyCode) {
     case this.keyCode.SPACE:
@@ -138,6 +142,10 @@ MenubarItemAction.prototype.handleKeydown = function (event) {
       break;
 
     default:
+      if (isPrintableCharacter(char)) {
+        this.menubar.setFocusByFirstCharacter(this, char);
+        flag = true;
+      }
       break;
   }
 
@@ -147,18 +155,6 @@ MenubarItemAction.prototype.handleKeydown = function (event) {
   }
 };
 
-MenubarItemAction.prototype.handleKeypress = function (event) {
-  var char = String.fromCharCode(event.charCode);
-
-  function isPrintableCharacter (str) {
-    return str.length === 1 && str.match(/\S/);
-  }
-
-  if (isPrintableCharacter(char)) {
-    this.menubar.setFocusByFirstCharacter(this, char);
-  }
-};
-
 MenubarItemAction.prototype.handleClick = function (event) {
 };
 

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

@@ -144,6 +144,8 @@ <h4>Notes</h4>
     <ol>
       <li>Menu radio buttons and checkboxes indicate the current format settings.</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>
     </ol>
   </section>