Merge pull request #1 from a11ydoer/menubarexample

add menubar example

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

@@ -0,0 +1,60 @@
+ul[role="menubar"] {
+  margin: 10px;
+  padding: 10px;
+  font-size: 110%;
+  list-style: none;
+  background-color: #EEEEEE;
+}
+
+ul[role="menubar"] [role="menuitem"],
+ul[role="menubar"] [role="separator"] {
+  padding: 0.25em;
+  background-color: #EEEEEE;
+  border: 2px solid #EEEEEE;
+}
+
+ul[role="menubar"] [role="separator"] {
+  padding-top: 0.15em;
+  background-image: url('../images/separator.png');
+  background-position: center;
+  background-repeat: repeat-x;
+}
+
+ul[role="menubar"] [role="menuitem"]:focus,
+ul[role="menubar"] [role="menuitem"]:hover,
+ul[role="menubar"] [role="separator"]:focus,
+ul[role="menubar"] [role="separator"]:hover {
+  background-color: black;
+  color: white;
+}
+
+ul[role="menubar"] a[role="menuitem"] {
+  text-decoration: none;
+  color: black;
+}
+
+ul[role="menubar"] li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+ul[role="menubar"] > li {
+  display: inline;
+}
+
+ul[role="menubar"] > li > a:after {
+  content: url('../images/pull-down-menu-icon.png');
+}
+
+ul[role="menubar"] ul[role="menu"] {
+  display: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+}
+
+ul[role="menubar"] ul[role="menu"] li a {
+  display: block;
+}
+

examples/menubar/menubar-1/js/.jscsrc

@@ -0,0 +1,3 @@
+{
+	"preset": "jquery"
+}

examples/menubar/menubar-1/js/MenuItemLinks.js

@@ -0,0 +1,187 @@
+/*
+*   This content is licensed according to the W3C Software License at
+*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*
+*   File:   MenuItem.js
+*
+*   Desc:   Popup Menu Menuitem widget that implements ARIA Authoring Practices
+*
+*   Author: Jon Gunderson, Ku Ja Eun and Nicholas Hoyt
+*/
+
+/*
+*   @constructor MenuItem
+*
+*   @desc
+*       Wrapper object for a simple menu item in a popup menu
+*
+*   @param domNode
+*       The DOM element node that serves as the menu item container.
+*       The menuObj PopupMenu is responsible for checking that it has
+*       requisite metadata, e.g. role="menuitem".
+*
+*   @param menuObj
+*       The object that is a wrapper for the PopupMenu DOM element that
+*       contains the menu item DOM element. See PopupMenu.js
+*/
+var MenuItem = function( domNode, menuObj ) {
+
+  this.domNode = domNode;
+  this.menu = menuObj;
+
+  this.keyCode = Object.freeze( {
+    "TAB": 9,
+    "RETURN": 13,
+    "ESC": 27,
+    "SPACE": 32,
+    "PAGEUP": 33,
+    "PAGEDOWN": 34,
+    "END": 35,
+    "HOME": 36,
+    "LEFT": 37,
+    "UP": 38,
+    "RIGHT": 39,
+    "DOWN": 40
+  } );
+};
+
+MenuItem.prototype.init = function() {
+  this.domNode.tabIndex = -1;
+
+  if ( !this.domNode.getAttribute( "role" ) ) {
+    this.domNode.setAttribute( "role", "menuitem" );
+  }
+
+  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 ) );
+  this.domNode.addEventListener( "mouseover", this.handleMouseover.bind( this ) );
+  this.domNode.addEventListener( "mouseout", this.handleMouseout.bind( this ) );
+
+};
+
+/* EVENT HANDLERS */
+
+MenuItem.prototype.handleKeydown = function( event ) {
+  var tgt = event.currentTarget,
+      flag = false,
+ clickEvent;
+
+  //  Console.log("[MenuItem][handleKeydown]: " + event.keyCode + " " + this.menu)
+
+  switch ( event.keyCode ) {
+    case this.keyCode.SPACE:
+    case this.keyCode.RETURN:
+      // Create simulated mouse event to mimic the behavior of ATs
+      // and let the event handler handleClick do the housekeeping.
+      try {
+        clickEvent = new MouseEvent( "click", {
+          "view": window,
+          "bubbles": true,
+          "cancelable": true
+        } );
+      }
+      catch ( err ) {
+        if ( document.createEvent ) {
+          // DOM Level 3 for IE 9+
+          clickEvent = document.createEvent( "MouseEvents" );
+          clickEvent.initEvent( "click", true, true );
+        }
+      }
+      tgt.dispatchEvent( clickEvent );
+      flag = true;
+      break;
+
+    case this.keyCode.ESC:
+      this.menu.setFocusToController();
+      this.menu.close( true );
+      flag = true;
+      break;
+
+    case this.keyCode.UP:
+      this.menu.setFocusToPreviousItem( this );
+      flag = true;
+      break;
+
+    case this.keyCode.DOWN:
+      this.menu.setFocusToNextItem( this );
+      flag = true;
+      break;
+
+    case this.keyCode.LEFT:
+      this.menu.setFocusToController( "previous" );
+      this.menu.close( true );
+      flag = true;
+      break;
+
+    case this.keyCode.RIGHT:
+      this.menu.setFocusToController( "next" );
+      this.menu.close( true );
+      flag = true;
+      break;
+
+    case this.keyCode.HOME:
+    case this.keyCode.PAGEUP:
+      this.menu.setFocusToFirstItem();
+      flag = true;
+      break;
+
+    case this.keyCode.END:
+    case this.keyCode.PAGEDOWN:
+      this.menu.setFocusToLastItem();
+      flag = true;
+      break;
+
+    case this.keyCode.TAB:
+      this.menu.setFocusToController();
+      this.menu.close( true );
+      break;
+
+    default:
+      break;
+  }
+
+  if ( flag ) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+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 );
+};
+
+MenuItem.prototype.handleFocus = function( event ) {
+  this.menu.hasFocus = true;
+};
+
+MenuItem.prototype.handleBlur = function( event ) {
+  this.menu.hasFocus = false;
+  setTimeout( this.menu.close.bind( this.menu, false ), 300 );
+};
+
+MenuItem.prototype.handleMouseover = function( event ) {
+  this.menu.hasHover = true;
+  this.menu.open();
+
+};
+
+MenuItem.prototype.handleMouseout = function( event ) {
+  this.menu.hasHover = false;
+  setTimeout( this.menu.close.bind( this.menu, false ), 300 );
+};