diff --git a/examples/menubar/menubar-1/css/menubarLinks.css b/examples/menubar/menubar-1/css/menubarLinks.css index 00cb89bd26..5f356235e5 100644 --- a/examples/menubar/menubar-1/css/menubarLinks.css +++ b/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; } diff --git a/examples/menubar/menubar-1/images/pull-down-menu-icon.png b/examples/menubar/menubar-1/images/down-arrow-brown.png similarity index 72% rename from examples/menubar/menubar-1/images/pull-down-menu-icon.png rename to examples/menubar/menubar-1/images/down-arrow-brown.png index b6c5714d1d..fe3e38aa31 100644 Binary files a/examples/menubar/menubar-1/images/pull-down-menu-icon.png and b/examples/menubar/menubar-1/images/down-arrow-brown.png differ diff --git a/examples/menubar/menubar-2/images/checkmark-inverse.png b/examples/menubar/menubar-1/images/down-arrow-gray.png similarity index 74% rename from examples/menubar/menubar-2/images/checkmark-inverse.png rename to examples/menubar/menubar-1/images/down-arrow-gray.png index c1f2f86c45..f5d34f2e07 100644 Binary files a/examples/menubar/menubar-2/images/checkmark-inverse.png and b/examples/menubar/menubar-1/images/down-arrow-gray.png differ diff --git a/examples/menubar/menubar-1/images/down-arrow.png b/examples/menubar/menubar-1/images/down-arrow.png deleted file mode 100644 index 694e80519b..0000000000 Binary files a/examples/menubar/menubar-1/images/down-arrow.png and /dev/null differ diff --git a/examples/menubar/menubar-1/images/pull-down-menu-icon.paint b/examples/menubar/menubar-1/images/pull-down-menu-icon.paint deleted file mode 100644 index f646943e03..0000000000 Binary files a/examples/menubar/menubar-1/images/pull-down-menu-icon.paint and /dev/null differ diff --git a/examples/menubar/menubar-1/images/right-arrow-brown.png b/examples/menubar/menubar-1/images/right-arrow-brown.png new file mode 100644 index 0000000000..9808455aea Binary files /dev/null and b/examples/menubar/menubar-1/images/right-arrow-brown.png differ diff --git a/examples/menubar/menubar-2/images/checkmark.png b/examples/menubar/menubar-1/images/right-arrow-gray.png similarity index 73% rename from examples/menubar/menubar-2/images/checkmark.png rename to examples/menubar/menubar-1/images/right-arrow-gray.png index 503d19edeb..b2fe4e3401 100644 Binary files a/examples/menubar/menubar-2/images/checkmark.png and b/examples/menubar/menubar-1/images/right-arrow-gray.png differ diff --git a/examples/menubar/menubar-1/js/MenubarItemLinks.js b/examples/menubar/menubar-1/js/MenubarItemLinks.js index af4b6aa5fe..03efb8a680 100644 --- a/examples/menubar/menubar-1/js/MenubarItemLinks.js +++ b/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) { }; diff --git a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js index 82b9db2cf6..5bdba323fa 100644 --- a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js +++ b/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); diff --git a/examples/menubar/menubar-1/menubar-1.html b/examples/menubar/menubar-1/menubar-1.html index 9b94ee6e27..d1bfa8ed03 100644 --- a/examples/menubar/menubar-1/menubar-1.html +++ b/examples/menubar/menubar-1/menubar-1.html @@ -149,7 +149,9 @@

Notes

to easily see which elements the roles and properties need to be included.
  • This is useful for people writing their own scripts to see which elements need roles and properties.
    • - +
  • CSS :after is used to render the down arrow in a menubar item using the CSS content property string using entity values.
    • +
  • CSS :after is used to render right arrow using the CSS content property string using entity values in pull down menu items that have sub-menus.
    • +

    Example 2: ARIA markup added dynamically

    diff --git a/examples/menubar/menubar-2/css/menubarAction.css b/examples/menubar/menubar-2/css/menubarAction.css index 79df915b97..2f161c5ba7 100644 --- a/examples/menubar/menubar-2/css/menubarAction.css +++ b/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 */ diff --git a/examples/menubar/menubar-2/images/check-brown.png b/examples/menubar/menubar-2/images/check-brown.png new file mode 100644 index 0000000000..2f1f5ff85a Binary files /dev/null and b/examples/menubar/menubar-2/images/check-brown.png differ diff --git a/examples/menubar/menubar-2/images/checkmark-inverse.paint b/examples/menubar/menubar-2/images/checkmark-inverse.paint deleted file mode 100644 index 561f232efb..0000000000 Binary files a/examples/menubar/menubar-2/images/checkmark-inverse.paint and /dev/null differ diff --git a/examples/menubar/menubar-2/images/checkmark.paint b/examples/menubar/menubar-2/images/checkmark.paint deleted file mode 100644 index 6c9e483d60..0000000000 Binary files a/examples/menubar/menubar-2/images/checkmark.paint and /dev/null differ diff --git a/examples/menubar/menubar-2/images/pull-down-menu-icon.png b/examples/menubar/menubar-2/images/down-arrow-brown.png similarity index 72% rename from examples/menubar/menubar-2/images/pull-down-menu-icon.png rename to examples/menubar/menubar-2/images/down-arrow-brown.png index b6c5714d1d..fe3e38aa31 100644 Binary files a/examples/menubar/menubar-2/images/pull-down-menu-icon.png and b/examples/menubar/menubar-2/images/down-arrow-brown.png differ diff --git a/examples/menubar/menubar-2/images/down-arrow.png b/examples/menubar/menubar-2/images/down-arrow.png deleted file mode 100644 index 694e80519b..0000000000 Binary files a/examples/menubar/menubar-2/images/down-arrow.png and /dev/null differ diff --git a/examples/menubar/menubar-2/images/pull-down-menu-icon.paint b/examples/menubar/menubar-2/images/pull-down-menu-icon.paint deleted file mode 100644 index f646943e03..0000000000 Binary files a/examples/menubar/menubar-2/images/pull-down-menu-icon.paint and /dev/null differ diff --git a/examples/menubar/menubar-2/images/separator.paint b/examples/menubar/menubar-2/images/separator.paint deleted file mode 100644 index 9e313a1cc1..0000000000 Binary files a/examples/menubar/menubar-2/images/separator.paint and /dev/null differ diff --git a/examples/menubar/menubar-2/js/MenuItemAction.js b/examples/menubar/menubar-2/js/MenuItemAction.js index efce7adbf6..ba3d71817c 100644 --- a/examples/menubar/menubar-2/js/MenuItemAction.js +++ b/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); diff --git a/examples/menubar/menubar-2/js/MenubarItemAction.js b/examples/menubar/menubar-2/js/MenubarItemAction.js index 4d5ab0b13e..2a195f2750 100644 --- a/examples/menubar/menubar-2/js/MenubarItemAction.js +++ b/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) { }; diff --git a/examples/menubar/menubar-2/menubar-2.html b/examples/menubar/menubar-2/menubar-2.html index c6f8f91493..321f2636ec 100644 --- a/examples/menubar/menubar-2/menubar-2.html +++ b/examples/menubar/menubar-2/menubar-2.html @@ -144,6 +144,8 @@

    Notes

    1. Menu radio buttons and checkboxes indicate the current format settings.
    2. Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems .
      3. +
    3. CSS :after is used to render the down arrow in a menubar item using the CSS content property string using entity values.
      4. +
    4. CSS :before is used to render checks using the CSS content property string using entity values on menuritemadio and menuitemcheckbox items.