From c06738961ccd2d537404a129cfa31dc41da445dc Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 19 Oct 2017 17:14:11 -0500 Subject: [PATCH] Navigation Menubar Example: fixed aria-expanded bug on second level parent menu items (pull #487) For issue #472, keep aria-expanded on parent menuitem elements in the drop down menus in sync with the actual state of the submenus they control. --- examples/menubar/menubar-1/js/MenubarItemLinks.js | 9 +++++++-- .../menubar/menubar-1/js/PopupMenuItemLinks.js | 10 +++++++++- examples/menubar/menubar-1/js/PopupMenuLinks.js | 14 ++++++++++++-- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/examples/menubar/menubar-1/js/MenubarItemLinks.js b/examples/menubar/menubar-1/js/MenubarItemLinks.js index 5fbcf50d91..7836ea1b2a 100644 --- a/examples/menubar/menubar-1/js/MenubarItemLinks.js +++ b/examples/menubar/menubar-1/js/MenubarItemLinks.js @@ -65,7 +65,6 @@ MenubarItem.prototype.init = function () { this.domNode.tabIndex = -1; this.domNode.addEventListener('keydown', this.handleKeydown.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)); @@ -147,7 +146,13 @@ MenubarItem.prototype.handleKeydown = function (event) { } }; -MenubarItem.prototype.handleClick = function (event) { +MenubarItem.prototype.setExpanded = function (value) { + if (value) { + this.domNode.setAttribute('aria-expanded', 'true'); + } + else { + this.domNode.setAttribute('aria-expanded', 'false'); + } }; MenubarItem.prototype.handleFocus = function (event) { diff --git a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js index 0d1ec605ee..3c176ea488 100644 --- a/examples/menubar/menubar-1/js/PopupMenuItemLinks.js +++ b/examples/menubar/menubar-1/js/PopupMenuItemLinks.js @@ -66,7 +66,6 @@ MenuItem.prototype.init = function () { var nextElement = this.domNode.nextElementSibling; if (nextElement && nextElement.tagName === 'UL') { - console.log('popup sub-menu'); this.popupMenu = new PopupMenu(nextElement, this.menu, this); this.popupMenu.init(); } @@ -185,6 +184,15 @@ MenuItem.prototype.handleKeydown = function (event) { } }; +MenuItem.prototype.setExpanded = function (value) { + if (value) { + this.domNode.setAttribute('aria-expanded', 'true'); + } + else { + this.domNode.setAttribute('aria-expanded', 'false'); + } +}; + MenuItem.prototype.handleClick = function (event) { this.menu.setFocusToController(); this.menu.close(true); diff --git a/examples/menubar/menubar-1/js/PopupMenuLinks.js b/examples/menubar/menubar-1/js/PopupMenuLinks.js index cb240523db..ea3ad4a3c8 100644 --- a/examples/menubar/menubar-1/js/PopupMenuLinks.js +++ b/examples/menubar/menubar-1/js/PopupMenuLinks.js @@ -241,7 +241,12 @@ PopupMenu.prototype.open = function () { this.domNode.style.zIndex = 100; } - this.domNode.setAttribute('aria-expanded', 'true'); + if (this.popupMenuItem) { + this.popupMenuItem.setExpanded(true); + } + else { + this.controller.setExpanded(true); + } }; @@ -256,6 +261,11 @@ PopupMenu.prototype.close = function (force) { if (force || (!this.hasFocus && !this.hasHover && !controllerHasHover)) { this.domNode.style.display = 'none'; this.domNode.style.zIndex = 0; - this.domNode.setAttribute('aria-expanded', 'false'); + if (this.popupMenuItem) { + this.popupMenuItem.setExpanded(false); + } + else { + this.controller.setExpanded(false); + } } };