accessible-menu - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

CHANGELOG.md

@@ -5,2 +5,27 @@ # Changelog
 
+## [2.2.0](https://github.com/NickDJM/accessible-menu/compare/v2.1.1...v2.2.0) (2021-03-24)
+
+
+### Features
+
+* **menu:** add expand/collapse events to MenuToggles ([b736c1a](https://github.com/NickDJM/accessible-menu/commit/b736c1adbc41d51f7c7b05e0c4fdc153c9b6444d)), closes [#90](https://github.com/NickDJM/accessible-menu/issues/90)
+
+
+### Bug Fixes
+
+* **event:** check if menu isHoverable before running event code ([638778d](https://github.com/NickDJM/accessible-menu/commit/638778de1016fe597dc6cdc958b0d74fabd0303a)), closes [#84](https://github.com/NickDJM/accessible-menu/issues/84)
+* **event:** properly pass event object to keydown and keyup events ([fc281bf](https://github.com/NickDJM/accessible-menu/commit/fc281bf81059e8dcd897d554a614bba3536d151b))
+* **menubar:** wait for menu to render before focussing child ([21f50ee](https://github.com/NickDJM/accessible-menu/commit/21f50ee0aa420500eaf43ef3f7761c8e080fd431)), closes [#99](https://github.com/NickDJM/accessible-menu/issues/99)
+* **polyfill:** add CustomEvent constructor polyfill for IE ([d08cb2d](https://github.com/NickDJM/accessible-menu/commit/d08cb2d7c35dbae4bdfab99f299f4baa8e217d0a)), closes [#97](https://github.com/NickDJM/accessible-menu/issues/97)
+
+
+### Documentation
+
+* mention new expand/collapse events in the toggle documentation ([f65ce32](https://github.com/NickDJM/accessible-menu/commit/f65ce32829cc00350c8ff7027863619ffc92887b))
+
+
+### Build System
+
+* **npm:** update dev dependencies to latest ([accc5ba](https://github.com/NickDJM/accessible-menu/commit/accc5ba143f01bfb37a06c67ecb6ac8925af4e3b))
+
 ### [2.1.1](https://github.com/NickDJM/accessible-menu/compare/v2.1.0...v2.1.1) (2020-11-05)
@@ -7,0 +32,0 @@

dist/accessibleMenu.min.js

@@ -1,1 +0,1 @@
-var AccessibleMenu=function(){"use strict";var e,t,n,r;function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function h(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=c(e);if(t){var o=c(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return m(this,n)}}function f(e,t,n){return(f="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var r=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=c(e)););return e}(e,t);if(r){var o=Object.getOwnPropertyDescriptor(r,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}function d(e){return function(e){if(Array.isArray(e))return p(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function v(e){var t="element";try{if(e instanceof HTMLElement)return!0;if("object"!==o(e))throw Error;for(var n in e)if(t=n,!(e[n]instanceof HTMLElement))throw Error}catch(e){throw new TypeError("".concat(t," must be an HTML Element."))}}function y(e){C(e);var t="value";try{if("object"===o(e))for(var n in e){if(t=n,"string"!=typeof e[n])throw Error;document.querySelector(e[n])}else document.querySelector(e);return!0}catch(e){throw new TypeError("".concat(t," must be a valid CSS selector."))}}function g(e){var t="value";try{if("boolean"==typeof e)return!0;if("object"!==o(e))throw Error;for(var n in e)if(t=n,"boolean"!=typeof e[n])throw Error}catch(e){throw new TypeError("".concat(t," must be a boolean."))}}function b(e){var t="value";try{if("number"==typeof e)return!0;if("object"!==o(e))throw Error;for(var n in e)if(t=n,"number"!=typeof e[n])throw Error}catch(e){throw new TypeError("".concat(t," must be a number."))}}function C(e){var t="value";try{if("string"==typeof e)return!0;if("object"!==o(e))throw Error;for(var n in e)if(t=n,"string"!=typeof e[n])throw Error}catch(e){throw new TypeError("".concat(t," must be a string."))}}function E(e){var t="element";try{if(e instanceof T)return!0;if("object"!==o(e))throw Error;for(var n in e)if(t=n,!(e[n]instanceof T))throw Error}catch(e){throw new TypeError("".concat(t," must be an instance of either BaseMenu, Menubar, or DisclosureMenu"))}}function M(e,t){return C(e),v(t),void 0!==t["on".concat(e)]}function w(e){var t="value";try{if("string"==typeof e)return!0;if("object"===o(e)){for(var n in e)if(t=n,"string"!=typeof e[n]){if(!Array.isArray(e[n]))throw Error;e[n].forEach((function(e){C(e)}))}}else{if(!Array.isArray(e))throw Error;C(e)}}catch(e){throw new TypeError("".concat(t," must be either a string or an array of strings."))}}Array.from||(Array.from=(e=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===e.call(t)},n=Math.pow(2,53)-1,r=function(e){var t=function(e){var t=Number(e);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(e);return Math.min(Math.max(t,0),n)},function(e){var n=this,o=Object(e);if(null==e)throw new TypeError("Array.from requires an array-like object - not null or undefined");var s,i=arguments.length>1?arguments[1]:void 0;if(void 0!==i){if(!t(i))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(s=arguments[2])}for(var l,u=r(o.length),c=t(n)?Object(new n(u)):new Array(u),a=0;a<u;)l=o[a],c[a]=i?void 0===s?i(l,a):i.call(s,l,a):l,a+=1;return c.length=u,c})),Array.includes||(Array.prototype.includes=function(e){return!!~this.indexOf(e)}),Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(e){if(null==this)throw TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw TypeError("predicate must be a function");for(var r=arguments[1],o=0;o<n;){var s=t[o];if(e.call(r,s,o,t))return s;o++}},configurable:!0,writable:!0}),String.prototype.startsWith||Object.defineProperty(String.prototype,"startsWith",{value:function(e,t){var n=t>0?0|t:0;return this.substring(n,n+e.length)===e}}),String.prototype.endsWith||(String.prototype.endsWith=function(e,t){return(void 0===t||t>this.length)&&(t=this.length),this.substring(t-e.length,t)===e});var S=function(){function e(t){var n=t.menuToggleElement,r=t.parentElement,o=t.controlledMenu,i=t.openClass,l=void 0===i?"show":i,u=t.closeClass,c=void 0===u?"hide":u,a=t.parentMenu,m=void 0===a?null:a;s(this,e),v({menuToggleElement:n,parentElement:r}),E(null!==m?{controlledMenu:o,parentMenu:m}:{controlledMenu:o}),this.domElements={toggle:n,parent:r},this.menuElements={controlledMenu:o,parentMenu:m},this.openClass=l||"",this.closeClass=c||"",this.isOpen=!1,this.initialize()}return l(e,[{key:"initialize",value:function(){var e=this;if(this.dom.toggle.setAttribute("aria-haspopup","true"),this.dom.toggle.setAttribute("aria-expanded","false"),function(e,t){C(e),v(t);var n=e.toLowerCase();if(t instanceof HTMLElement)return t.tagName.toLowerCase()===n;var r=!0;for(var o in t)t[o].tagName.toLowerCase()!==n&&(r=!1);return r}("button",this.dom.toggle)||this.dom.toggle.setAttribute("role","button"),""===this.dom.toggle.id||""===this.elements.controlledMenu.dom.menu.id){var t=Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,10),n=this.dom.toggle.innerText.replace(/[^a-zA-Z0-9\s]/g,""),r=t;!n.replace(/\s/g,"").length&&this.dom.toggle.getAttribute("aria-label")&&(n=this.dom.toggle.getAttribute("aria-label").replace(/[^a-zA-Z0-9\s]/g,"")),n.replace(/\s/g,"").length>0&&((n=n.toLowerCase().replace(/\s+/g,"-")).startsWith("-")&&(n=n.substring(1)),n.endsWith("-")&&(n=n.slice(0,-1)),r="".concat(n,"-").concat(r)),this.dom.toggle.id=this.dom.toggle.id||"".concat(r,"-menu-button"),this.elements.controlledMenu.dom.menu.id=this.elements.controlledMenu.dom.menu.id||"".concat(r,"-menu")}this.elements.controlledMenu.dom.menu.setAttribute("aria-labelledby",this.dom.toggle.id),this.dom.toggle.setAttribute("aria-controls",this.elements.controlledMenu.dom.menu.id),""!==this.closeClass&&("string"==typeof this.closeClass?this.elements.controlledMenu.dom.menu.classList.add(this.closeClass):Array.isArray(this.closeClass)&&this.closeClass.forEach((function(t){e.elements.controlledMenu.dom.menu.classList.add(t)})))}},{key:"expand",value:function(){var e=this;this.dom.toggle.setAttribute("aria-expanded","true"),""!==this.openClass&&("string"==typeof this.openClass?this.elements.controlledMenu.dom.menu.classList.add(this.openClass):Array.isArray(this.openClass)&&this.openClass.forEach((function(t){e.elements.controlledMenu.dom.menu.classList.add(t)}))),""!==this.closeClass&&("string"==typeof this.closeClass?this.elements.controlledMenu.dom.menu.classList.remove(this.closeClass):Array.isArray(this.closeClass)&&this.closeClass.forEach((function(t){e.elements.controlledMenu.dom.menu.classList.remove(t)})))}},{key:"collapse",value:function(){var e=this;this.dom.toggle.setAttribute("aria-expanded","false"),""!==this.closeClass&&("string"==typeof this.closeClass?this.elements.controlledMenu.dom.menu.classList.add(this.closeClass):Array.isArray(this.closeClass)&&this.closeClass.forEach((function(t){e.elements.controlledMenu.dom.menu.classList.add(t)}))),""!==this.openClass&&("string"==typeof this.openClass?this.elements.controlledMenu.dom.menu.classList.remove(this.openClass):Array.isArray(this.openClass)&&this.openClass.forEach((function(t){e.elements.controlledMenu.dom.menu.classList.remove(t)})))}},{key:"open",value:function(){this.isOpen=!0,this.expand(),this.closeSiblings(),this.elements.parentMenu&&(this.elements.parentMenu.focusState="child"),this.elements.controlledMenu.focusState="self"}},{key:"preview",value:function(){this.isOpen=!0,this.expand(),this.closeSiblings(),this.elements.parentMenu&&(this.elements.parentMenu.focusState="self"),this.elements.controlledMenu.focusState="none"}},{key:"close",value:function(){this.isOpen&&(this.isOpen=!1,this.collapse(),this.closeChildren(),this.elements.controlledMenu.currentChild=0,this.elements.controlledMenu.blur(),this.elements.parentMenu&&(this.elements.parentMenu.focusState="self"))}},{key:"toggle",value:function(){this.isOpen?this.close():this.open()}},{key:"closeSiblings",value:function(){var e=this;this.elements.parentMenu&&this.elements.parentMenu.elements.submenuToggles.forEach((function(t){t!==e&&t.close()}))}},{key:"closeChildren",value:function(){this.elements.controlledMenu.elements.submenuToggles.forEach((function(e){return e.close()}))}},{key:"dom",get:function(){return this.domElements}},{key:"elements",get:function(){return this.menuElements}},{key:"isOpen",get:function(){return this.show},set:function(e){g({value:e}),this.show=e}},{key:"openClass",get:function(){return this.controlledMenuOpenClass},set:function(e){w({openClass:e}),this.controlledMenuOpenClass=e}},{key:"closeClass",get:function(){return this.controlledMenuCloseClass},set:function(e){w({closeClass:e}),this.controlledMenuCloseClass=e}}]),e}(),k=function(){function e(t){var n=t.menuItemElement,r=t.menuLinkElement,i=t.parentMenu,l=t.isSubmenuItem,u=void 0!==l&&l,c=t.childMenu,a=void 0===c?null:c,m=t.toggle,h=void 0===m?null:m;s(this,e),v({menuItemElement:n,menuLinkElement:r}),g({isSubmenuItem:u}),E(null!==a?{parentMenu:i,childMenu:a}:{parentMenu:i}),null!==h&&function(e){var t="element";try{if(e instanceof S)return!0;if("object"!==o(e)||e instanceof S)throw Error;for(var n in e)if(t=n,!(e[n]instanceof S))throw Error}catch(e){throw new TypeError("".concat(t," must be a MenuToggle."))}}({toggle:h}),this.domElements={item:n,link:r},this.menuElements={parentMenu:i,childMenu:a,toggle:h},this.isController=u,this.initialize()}return l(e,[{key:"initialize",value:function(){this.isMenubar=this.elements.parentMenu instanceof L,this.isMenubar&&(this.dom.item.setAttribute("role","none"),this.dom.link.setAttribute("role","menuitem"),this.dom.link.tabIndex=-1)}},{key:"focus",value:function(){"mouse"!==this.elements.parentMenu.currentEvent&&this.dom.link.focus(),this.isMenubar&&this.elements.parentMenu.isTopLevel&&(this.dom.link.tabIndex=0)}},{key:"blur",value:function(){"mouse"!==this.elements.parentMenu.currentEvent&&this.dom.link.blur(),this.isMenubar&&this.elements.parentMenu.isTopLevel&&(this.dom.link.tabIndex=-1)}},{key:"dom",get:function(){return this.domElements}},{key:"elements",get:function(){return this.menuElements}},{key:"isSubmenuItem",get:function(){return this.isController}}]),e}();function I(e){!function(e){var t="event";try{if(e instanceof KeyboardEvent)return!0;if("object"!==o(e))throw Error;for(var n in e)if(t=n,!(e[n]instanceof KeyboardEvent))throw Error}catch(e){throw new TypeError("".concat(t," must be a KeyboardEvent."))}}(e);try{var t=e.key||e.keyCode,n={Enter:"Enter"===t||13===t,Space:" "===t||"Spacebar"===t||32===t,Escape:"Escape"===t||"Esc"===t||27===t,ArrowUp:"ArrowUp"===t||"Up"===t||38===t,ArrowRight:"ArrowRight"===t||"Right"===t||39===t,ArrowDown:"ArrowDown"===t||"Down"===t||40===t,ArrowLeft:"ArrowLeft"===t||"Left"===t||37===t,Home:"Home"===t||36===t,End:"End"===t||35===t,Character:!!t.match(/^[a-zA-Z]{1}$/),Tab:"Tab"===t||9===t};return Object.keys(n).find((function(e){return!0===n[e]}))}catch(e){return""}}function A(e){!function(e){var t="event";try{if(e instanceof Event)return!0;if("object"!==o(e))throw Error;for(var n in e)if(t=n,!(e[n]instanceof Event))throw Error}catch(e){throw new TypeError("".concat(t," must be an Event."))}}(e),e.preventDefault(),e.stopPropagation()}var T=function(){function e(t){var n=t.menuElement,r=t.menuItemSelector,o=void 0===r?"li":r,i=t.menuLinkSelector,l=void 0===i?"a":i,u=t.submenuItemSelector,c=void 0===u?"":u,a=t.submenuToggleSelector,m=void 0===a?"a":a,h=t.submenuSelector,f=void 0===h?"ul":h,d=t.controllerElement,p=void 0===d?null:d,b=t.containerElement,C=void 0===b?null:b,M=t.openClass,w=void 0===M?"show":M,S=t.closeClass,k=void 0===S?"hide":S,I=t.isTopLevel,A=void 0===I||I,T=t.parentMenu,L=void 0===T?null:T,O=t.isHoverable,j=void 0!==O&&O,D=t.hoverDelay,H=void 0===D?250:D;s(this,e),g({isTopLevel:A}),y(""!==c?{menuItemSelector:o,menuLinkSelector:l,submenuItemSelector:c,submenuToggleSelector:m,submenuSelector:f}:{menuItemSelector:o,menuLinkSelector:l}),v(null!==p||null!==C?{menuElement:n,controllerElement:p,containerElement:C}:{menuElement:n}),null!==L&&E({parentMenu:L}),this.domElements={menu:n,menuItems:[],submenuItems:[],submenuToggles:[],submenus:[],controller:p,container:C},this.domSelectors={menuItems:o,menuLinks:l,submenuItems:c,submenuToggles:m,submenus:f},this.menuElements={menuItems:[],submenuToggles:[],controller:null,parentMenu:L,rootMenu:A?this:null},this.openClass=w||"",this.closeClass=k||"",this.root=A,this.currentChild=0,this.focusState="none",this.currentEvent="none",this.isHoverable=j,this.hoverDelay=H,this.initialize()}return l(e,[{key:"initialize",value:function(){if(null===this.elements.rootMenu&&this.findRootMenu(this),this.setDOMElements(),this.isTopLevel&&this.dom.controller&&this.dom.container){var e=new S({menuToggleElement:this.dom.controller,parentElement:this.dom.container,controlledMenu:this,openClass:this.openClass,closeClass:this.closeClass});this.menuElements.controller=e}}},{key:"setDOMElementType",value:function(e,t,n){if("string"!=typeof this.selectors[e])throw new Error("".concat(e," is not a valid element type within the menu."));t&&v({base:t});var r=t||this.dom.menu,o=this.selectors[e],s=Array.from(r.querySelectorAll(o));this.domElements[e]=void 0!==n?"function"==typeof n?s.filter((function(e){return n(e)})):s:s.filter((function(e){return function(e){return e.parentElement===r}(e)}))}},{key:"addDOMElementType",value:function(e,t,n){if("string"!=typeof this.selectors[e])throw new Error("".concat(e," is not a valid element type within the menu."));t&&v({base:t});var r=t||this.dom.menu,o=this.selectors[e],s=Array.from(r.querySelectorAll(o));this.domElements[e]=[].concat(d(this.domElements[e]),d(void 0!==n?"function"==typeof n?s.filter((function(e){return n(e)})):s:s.filter((function(e){return function(e){return e.parentElement===r}(e)}))))}},{key:"clearDOMElementType",value:function(e){if("menu"!==e)if(Array.isArray(this.domElements[e]))this.domElements[e]=[];else{if(void 0===this.domElements[e])throw new Error("".concat(e," is not a valid element type within the menu."));this.domElements[e]=null}}},{key:"setDOMElements",value:function(){var e=this;this.setDOMElementType("menuItems"),""!==this.selectors.submenuItems&&(this.setDOMElementType("submenuItems"),this.clearDOMElementType("submenuToggles"),this.clearDOMElementType("submenus"),this.dom.submenuItems.forEach((function(t){e.addDOMElementType("submenuToggles",t),e.addDOMElementType("submenus",t)})))}},{key:"findRootMenu",value:function(e){if(e.isTopLevel)this.menuElements.rootMenu=e;else{if(null===e.elements.parentMenu)throw new Error("Cannot find root menu.");this.findRootMenu(e.elements.parentMenu)}}},{key:"createChildElements",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;this.dom.menuItems.forEach((function(e){var r;if(t.dom.submenuItems.includes(e)){var o=e.querySelector(t.selectors.submenuToggles),s=e.querySelector(t.selectors.submenus),i=new n({menuElement:s,menuItemSelector:t.selectors.menuItems,menuLinkSelector:t.selectors.menuLinks,submenuItemSelector:t.selectors.submenuItems,submenuToggleSelector:t.selectors.submenuToggles,submenuSelector:t.selectors.submenus,openClass:t.openClass,closeClass:t.closeClass,isTopLevel:!1,parentMenu:t,isHoverable:t.isHoverable,hoverDelay:t.hoverDelay}),l=new S({menuToggleElement:o,parentElement:e,controlledMenu:i,openClass:t.openClass,closeClass:t.closeClass,parentMenu:t});t.menuElements.submenuToggles.push(l),r=new k({menuItemElement:e,menuLinkElement:o,parentMenu:t,isSubmenuItem:!0,childMenu:i,toggle:l})}else{var u=e.querySelector(t.selectors.menuLinks);r=new k({menuItemElement:e,menuLinkElement:u,parentMenu:t})}t.menuElements.menuItems.push(r)}))}},{key:"handleFocus",value:function(){var e=this;this.elements.menuItems.forEach((function(t,n){t.dom.link.addEventListener("focus",(function(){e.elements.parentMenu&&(e.elements.parentMenu.focusState="child"),t.elements.childMenu&&(t.elements.childMenu.focusState="none"),e.focusState="self",e.currentChild=n}))}))}},{key:"handleClick",value:function(){var e=this;function t(e,t,n){A(n),e.currentEvent="mouse",t.toggle(),t.isOpen&&(e.focusState="self",t.elements.controlledMenu.focusState="none")}document.addEventListener("mouseup",(function(t){"none"!==e.focusState&&(e.currentEvent="mouse",e.dom.menu.contains(t.target)||!e.dom.menu===t.target||(e.closeChildren(),e.blur(),e.elements.controller&&e.elements.controller.close()))})),this.elements.submenuToggles.forEach((function(n){M("touchend",n.dom.toggle)?n.dom.toggle.ontouchend=function(r){t(e,n,r)}:n.dom.toggle.onmouseup=function(r){t(e,n,r)}})),this.isTopLevel&&this.elements.controller&&(M("touchend",this.elements.controller.dom.toggle)?this.elements.controller.dom.toggle.ontouchend=function(n){t(e,e.elements.controller,n)}:this.elements.controller.dom.toggle.onmouseup=function(n){t(e,e.elements.controller,n)})}},{key:"handleHover",value:function(){var e=this;this.elements.submenuToggles.forEach((function(t){t.dom.parent.addEventListener("mouseenter",(function(){e.currentEvent="mouse",t.open()})),t.dom.parent.addEventListener("mouseleave",(function(){setTimeout((function(){e.currentEvent="mouse",t.close()}),e.hoverDelay)}))}))}},{key:"handleKeydown",value:function(){var e=this;this.isTopLevel&&this.elements.controller&&this.elements.controller.dom.toggle.addEventListener("keydown",(function(){e.currentEvent="keyboard";var t=I(event);"Space"!==t&&"Enter"!==t||A(event)}))}},{key:"handleKeyup",value:function(){var e=this;this.isTopLevel&&this.elements.controller&&this.elements.controller.dom.toggle.addEventListener("keyup",(function(){e.currentEvent="keyboard";var t=I(event);"Space"!==t&&"Enter"!==t||(A(event),e.elements.controller.open(),e.focusFirstChild())}))}},{key:"focus",value:function(){this.focusState="self","mouse"!==this.currentEvent&&this.dom.menu.focus()}},{key:"blur",value:function(){this.focusState="none","mouse"!==this.currentEvent&&this.dom.menu.blur(),this.isTopLevel&&this.elements.controller&&this.elements.controller.close()}},{key:"focusFirstChild",value:function(){this.blurCurrentChild(),this.currentChild=0,this.focusCurrentChild()}},{key:"focusLastChild",value:function(){this.blurCurrentChild(),this.currentChild=this.elements.menuItems.length-1,this.focusCurrentChild()}},{key:"focusNextChild",value:function(){this.currentChild===this.elements.menuItems.length-1?this.focusFirstChild():(this.blurCurrentChild(),this.currentChild=this.currentChild+1,this.focusCurrentChild())}},{key:"focusPreviousChild",value:function(){0===this.currentChild?this.focusLastChild():(this.blurCurrentChild(),this.currentChild=this.currentChild-1,this.focusCurrentChild())}},{key:"focusCurrentChild",value:function(){-1!==this.currentChild&&this.currentMenuItem.focus()}},{key:"blurCurrentChild",value:function(){-1!==this.currentChild&&this.currentMenuItem.blur()}},{key:"focusNextChildWithCharacter",value:function(e){for(var t=e.toLowerCase(),n=this.currentChild+1,r=!1;!r&&n<this.elements.menuItems.length;){this.elements.menuItems[n].dom.item.innerText.toLowerCase().startsWith(t)&&(r=!0,this.currentChild=n,this.focusCurrentChild()),n++}}},{key:"focusController",value:function(){this.dom.controller&&("mouse"!==this.currentEvent&&this.dom.controller.focus(),this.focusState="none")}},{key:"focusContainer",value:function(){this.dom.container&&("mouse"!==this.currentEvent&&this.dom.container.focus(),this.focusState="none")}},{key:"closeChildren",value:function(){this.elements.submenuToggles.forEach((function(e){return e.close()}))}},{key:"dom",get:function(){return this.domElements}},{key:"selectors",get:function(){return this.domSelectors}},{key:"elements",get:function(){return this.menuElements}},{key:"openClass",get:function(){return this.submenuOpenClass},set:function(e){w({openClass:e}),this.submenuOpenClass=e}},{key:"closeClass",get:function(){return this.submenuCloseClass},set:function(e){w({closeClass:e}),this.submenuCloseClass=e}},{key:"isTopLevel",get:function(){return this.root}},{key:"currentChild",get:function(){return this.focussedChild},set:function(e){b({value:e}),this.focussedChild=e}},{key:"focusState",get:function(){return this.state},set:function(e){!function(e){C(e);var t=["none","self","child"],n="value";try{if("object"!==o(e)){if(t.includes(e))return!0;throw Error}for(var r in e)if(n=r,!t.includes(e[r]))throw Error}catch(e){throw new Error("".concat(n," must be one of the following values: ").concat(t.join(", ")))}}({value:e}),this.state=e}},{key:"currentEvent",get:function(){return this.event},set:function(e){!function(e){C(e);var t=["none","mouse","keyboard"],n="value";try{if("object"!==o(e)){if(t.includes(e))return!0;throw Error}for(var r in e)if(n=r,!t.includes(e[r]))throw Error}catch(e){throw new Error("".concat(n," must be one of the following values: ").concat(t.join(", ")))}}({value:e}),this.event=e}},{key:"currentMenuItem",get:function(){return this.elements.menuItems[this.currentChild]}},{key:"isHoverable",get:function(){return this.hoverable},set:function(e){g({value:e}),this.hoverable=e}},{key:"hoverDelay",get:function(){return this.delay},set:function(e){b({value:e}),this.delay=e}}]),e}(),L=function(e){u(n,e);var t=h(n);function n(e){var r=e.menuElement,o=e.menuItemSelector,i=void 0===o?"li":o,l=e.menuLinkSelector,u=void 0===l?"a":l,c=e.submenuItemSelector,a=void 0===c?"":c,m=e.submenuToggleSelector,h=void 0===m?"a":m,f=e.submenuSelector,d=void 0===f?"ul":f,p=e.controllerElement,v=void 0===p?null:p,y=e.containerElement,g=void 0===y?null:y,b=e.openClass,C=void 0===b?"show":b,E=e.closeClass,M=void 0===E?"hide":E,w=e.isTopLevel,S=void 0===w||w,k=e.parentMenu,I=void 0===k?null:k,A=e.isHoverable,T=void 0!==A&&A,L=e.hoverDelay,O=void 0===L?250:L;return s(this,n),t.call(this,{menuElement:r,menuItemSelector:i,menuLinkSelector:u,submenuItemSelector:a,submenuToggleSelector:h,submenuSelector:d,controllerElement:v,containerElement:g,openClass:C,closeClass:M,isTopLevel:S,parentMenu:I,isHoverable:T,hoverDelay:O})}return l(n,[{key:"initialize",value:function(){f(c(n.prototype),"initialize",this).call(this),this.dom.menu.setAttribute("role","menubar"),this.createChildElements(n),this.handleFocus(),this.handleClick(),this.isHoverable&&this.handleHover(),this.handleKeydown(),this.handleKeyup(),this.elements.menuItems[0].dom.link.tabIndex=0}},{key:"handleKeydown",value:function(){var e=this;f(c(n.prototype),"handleKeydown",this).call(this),this.dom.menu.addEventListener("keydown",(function(t){e.currentEvent="keyboard";var n=I(t);if("Tab"===n&&("none"!==e.elements.rootMenu.focusState?(e.elements.rootMenu.blur(),e.elements.rootMenu.closeChildren()):e.elements.rootMenu.focus()),"Character"===n)A(t);else if(e.isTopLevel){if("self"===e.focusState){(["ArrowRight","ArrowLeft","Home","End"].includes(n)||e.currentMenuItem.isSubmenuItem&&["Space","Enter","ArrowDown","ArrowUp"].includes(n)||e.elements.controller&&["Escape"].includes(n))&&A(t)}}else{(["Escape","ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(n)||e.currentMenuItem.isSubmenuItem&&["Space","Enter"].includes(n))&&A(t)}}))}},{key:"handleKeyup",value:function(){var e=this;f(c(n.prototype),"handleKeyup",this).call(this),this.dom.menu.addEventListener("keyup",(function(t){e.currentEvent="keyboard";var n=I(t),r=t.altKey,o=t.crtlKey,s=t.metaKey;if("Character"!==n||(r||o||s))if(e.isTopLevel){if("self"===e.focusState)if("Space"===n||"Enter"===n)e.currentMenuItem.isSubmenuItem&&(A(t),e.currentMenuItem.elements.toggle.open(),e.currentMenuItem.elements.childMenu.focusFirstChild());else if("ArrowRight"===n){A(t);var i=e.currentMenuItem.isSubmenuItem&&e.currentMenuItem.elements.toggle.isOpen;e.focusNextChild(),i&&(e.currentMenuItem.isSubmenuItem?e.currentMenuItem.elements.toggle.preview():e.closeChildren())}else if("ArrowLeft"===n){A(t);var l=e.currentMenuItem.isSubmenuItem&&e.currentMenuItem.elements.toggle.isOpen;e.focusPreviousChild(),l&&(e.currentMenuItem.isSubmenuItem?e.currentMenuItem.elements.toggle.preview():e.closeChildren())}else if("ArrowDown"===n)e.currentMenuItem.isSubmenuItem&&(A(t),e.currentMenuItem.elements.toggle.open(),e.currentMenuItem.elements.childMenu.focusFirstChild());else if("ArrowUp"===n)e.currentMenuItem.isSubmenuItem&&(A(t),e.currentMenuItem.elements.toggle.open(),e.currentMenuItem.elements.childMenu.focusLastChild());else if("Home"===n)A(t),e.focusFirstChild();else if("End"===n)A(t),e.focusLastChild();else if("Escape"===n){e.elements.submenuToggles.some((function(e){return e.isOpen}))?(A(t),e.closeChildren()):e.isTopLevel&&e.elements.controller&&e.elements.controller.isOpen&&(A(t),e.elements.controller.close(),e.focusController())}}else"Space"===n||"Enter"===n?e.currentMenuItem.isSubmenuItem&&(A(t),e.currentMenuItem.elements.toggle.open(),e.currentMenuItem.elements.childMenu.focusFirstChild()):"Escape"===n?(A(t),e.elements.rootMenu.closeChildren(),e.elements.rootMenu.focusCurrentChild()):"ArrowRight"===n?e.currentMenuItem.isSubmenuItem?(A(t),e.currentMenuItem.elements.toggle.open(),e.currentMenuItem.elements.childMenu.focusFirstChild()):(A(t),e.elements.rootMenu.closeChildren(),e.elements.rootMenu.focusNextChild(),e.elements.rootMenu.currentMenuItem.isSubmenuItem&&e.elements.rootMenu.currentMenuItem.elements.toggle.preview()):"ArrowLeft"===n?e.elements.parentMenu.currentMenuItem.isSubmenuItem&&(A(t),e.elements.parentMenu.currentMenuItem.elements.toggle.close(),e.elements.parentMenu.focusCurrentChild(),e.elements.parentMenu===e.elements.rootMenu&&(e.elements.rootMenu.closeChildren(),e.elements.rootMenu.focusPreviousChild(),e.elements.rootMenu.currentMenuItem.isSubmenuItem&&e.elements.rootMenu.currentMenuItem.elements.toggle.preview())):"ArrowDown"===n?(A(t),e.focusNextChild()):"ArrowUp"===n?(A(t),e.focusPreviousChild()):"Home"===n?(A(t),e.focusFirstChild()):"End"===n&&(A(t),e.focusLastChild());else A(t),e.focusNextChildWithCharacter(t.key)}))}}]),n}(T);return{Menubar:L,DisclosureMenu:function(e){u(n,e);var t=h(n);function n(e){var r,o=e.menuElement,i=e.menuItemSelector,l=void 0===i?"li":i,u=e.menuLinkSelector,c=void 0===u?"a":u,a=e.submenuItemSelector,m=void 0===a?"":a,h=e.submenuToggleSelector,f=void 0===h?"a":h,d=e.submenuSelector,p=void 0===d?"ul":d,v=e.controllerElement,y=void 0===v?null:v,g=e.containerElement,b=void 0===g?null:g,C=e.openClass,E=void 0===C?"show":C,M=e.closeClass,w=void 0===M?"hide":M,S=e.isTopLevel,k=void 0===S||S,I=e.parentMenu,A=void 0===I?null:I,T=e.isHoverable,L=void 0!==T&&T,O=e.hoverDelay,j=void 0===O?250:O;return s(this,n),(r=t.call(this,{menuElement:o,menuItemSelector:l,menuLinkSelector:c,submenuItemSelector:m,submenuToggleSelector:f,submenuSelector:p,controllerElement:y,containerElement:b,openClass:E,closeClass:w,isTopLevel:k,parentMenu:A,isHoverable:L,hoverDelay:j})).currentChild=-1,r}return l(n,[{key:"initialize",value:function(){f(c(n.prototype),"initialize",this).call(this),this.createChildElements(n),this.handleFocus(),this.handleClick(),this.isHoverable&&this.handleHover(),this.handleKeydown(),this.handleKeyup()}},{key:"handleKeydown",value:function(){var e=this;f(c(n.prototype),"handleKeydown",this).call(this),this.dom.menu.addEventListener("keydown",(function(t){e.currentEvent="keyboard";var n=I(t);if("self"===e.focusState){(["ArrowUp","ArrowRight","ArrowDown","ArrowLeft","Home","End"].includes(n)||e.currentMenuItem.isSubmenuItem&&["Space","Enter"].includes(n)||e.elements.controller&&["Escape"].includes(n)||e.elements.parentMenu&&["Escape"].includes(n))&&A(t)}}))}},{key:"handleKeyup",value:function(){var e=this;f(c(n.prototype),"handleKeyup",this).call(this),this.dom.menu.addEventListener("keyup",(function(t){e.currentEvent="keyboard";var n=I(t);if("self"===e.focusState)if("Space"===n||"Enter"===n)e.currentMenuItem.isSubmenuItem&&(A(t),e.currentMenuItem.elements.toggle.preview());else if("Escape"===n){e.elements.submenuToggles.some((function(e){return e.isOpen}))?(A(t),e.closeChildren()):e.elements.parentMenu?(A(t),e.elements.parentMenu.closeChildren(),e.elements.parentMenu.focusCurrentChild()):e.isTopLevel&&e.elements.controller&&e.elements.controller.isOpen&&(e.elements.controller.close(),e.focusController())}else"ArrowDown"===n||"ArrowRight"===n?(A(t),e.currentMenuItem.isSubmenuItem&&e.currentMenuItem.elements.toggle.isOpen?e.currentMenuItem.elements.childMenu.focusFirstChild():e.focusNextChild()):"ArrowUp"===n||"ArrowLeft"===n?(A(t),e.focusPreviousChild()):"Home"===n?(A(t),e.focusFirstChild()):"End"===n&&(A(t),e.focusLastChild())}))}},{key:"focusNextChild",value:function(){this.currentChild<this.elements.menuItems.length-1&&(this.blurCurrentChild(),this.currentChild=this.currentChild+1,this.focusCurrentChild())}},{key:"focusPreviousChild",value:function(){this.currentChild>0&&(this.blurCurrentChild(),this.currentChild=this.currentChild-1,this.focusCurrentChild())}}]),n}(T)}}();
+var AccessibleMenu=function(){"use strict";var e,t,s,n;function r(e){let t="element";try{if(e instanceof HTMLElement)return!0;if("object"!=typeof e)throw Error;for(const s in e)if(t=s,!(e[s]instanceof HTMLElement))throw Error}catch(e){throw new TypeError(`${t} must be an HTML Element.`)}}function o(e){u(e);let t="value";try{if("object"==typeof e)for(const s in e){if(t=s,"string"!=typeof e[s])throw Error;document.querySelector(e[s])}else document.querySelector(e);return!0}catch(e){throw new TypeError(`${t} must be a valid CSS selector.`)}}function l(e){let t="value";try{if("boolean"==typeof e)return!0;if("object"!=typeof e)throw Error;for(const s in e)if(t=s,"boolean"!=typeof e[s])throw Error}catch(e){throw new TypeError(`${t} must be a boolean.`)}}function i(e){let t="value";try{if("number"==typeof e)return!0;if("object"!=typeof e)throw Error;for(const s in e)if(t=s,"number"!=typeof e[s])throw Error}catch(e){throw new TypeError(`${t} must be a number.`)}}function u(e){let t="value";try{if("string"==typeof e)return!0;if("object"!=typeof e)throw Error;for(const s in e)if(t=s,"string"!=typeof e[s])throw Error}catch(e){throw new TypeError(`${t} must be a string.`)}}function h(e){let t="element";try{if(e instanceof g)return!0;if("object"!=typeof e)throw Error;for(const s in e)if(t=s,!(e[s]instanceof g))throw Error}catch(e){throw new TypeError(`${t} must be an instance of either BaseMenu, Menubar, or DisclosureMenu`)}}function m(e,t){u(e),r(t);return void 0!==t[`on${e}`]}function c(e){let t="value";try{if("string"==typeof e)return!0;if("object"==typeof e){for(const s in e)if(t=s,"string"!=typeof e[s]){if(!Array.isArray(e[s]))throw Error;e[s].forEach((e=>{u(e)}))}}else{if(!Array.isArray(e))throw Error;u(e)}}catch(e){throw new TypeError(`${t} must be either a string or an array of strings.`)}}Array.from||(Array.from=(e=Object.prototype.toString,t=function(t){return"function"==typeof t||"[object Function]"===e.call(t)},s=Math.pow(2,53)-1,n=function(e){var t=function(e){var t=Number(e);return isNaN(t)?0:0!==t&&isFinite(t)?(t>0?1:-1)*Math.floor(Math.abs(t)):t}(e);return Math.min(Math.max(t,0),s)},function(e){var s=this,r=Object(e);if(null==e)throw new TypeError("Array.from requires an array-like object - not null or undefined");var o,l=arguments.length>1?arguments[1]:void 0;if(void 0!==l){if(!t(l))throw new TypeError("Array.from: when provided, the second argument must be a function");arguments.length>2&&(o=arguments[2])}for(var i,u=n(r.length),h=t(s)?Object(new s(u)):new Array(u),m=0;m<u;)i=r[m],h[m]=l?void 0===o?l(i,m):l.call(o,i,m):i,m+=1;return h.length=u,h})),Array.includes||(Array.prototype.includes=function(e){return!!~this.indexOf(e)}),Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(e){if(null==this)throw TypeError('"this" is null or not defined');var t=Object(this),s=t.length>>>0;if("function"!=typeof e)throw TypeError("predicate must be a function");for(var n=arguments[1],r=0;r<s;){var o=t[r];if(e.call(n,o,r,t))return o;r++}},configurable:!0,writable:!0}),String.prototype.startsWith||Object.defineProperty(String.prototype,"startsWith",{value:function(e,t){var s=t>0?0|t:0;return this.substring(s,s+e.length)===e}}),String.prototype.endsWith||(String.prototype.endsWith=function(e,t){return(void 0===t||t>this.length)&&(t=this.length),this.substring(t-e.length,t)===e}),function(){if("function"==typeof window.CustomEvent)return!1;window.CustomEvent=function(e,t){t=t||{bubbles:!1,cancelable:!1,detail:null};var s=document.createEvent("CustomEvent");return s.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),s}}();class a{constructor({menuToggleElement:e,parentElement:t,controlledMenu:s,openClass:n="show",closeClass:o="hide",parentMenu:l=null}){r({menuToggleElement:e,parentElement:t}),h(null!==l?{controlledMenu:s,parentMenu:l}:{controlledMenu:s}),this.domElements={toggle:e,parent:t},this.menuElements={controlledMenu:s,parentMenu:l},this.openClass=n||"",this.closeClass=o||"",this.isOpen=!1,this.expandEvent=new CustomEvent("accessibleMenuExpand",{bubbles:!0,detail:{toggle:this}}),this.collapseEvent=new CustomEvent("accessibleMenuCollapse",{bubbles:!0,detail:{toggle:this}}),this.initialize()}initialize(){if(this.dom.toggle.setAttribute("aria-haspopup","true"),this.dom.toggle.setAttribute("aria-expanded","false"),function(e,t){u(e),r(t);const s=e.toLowerCase();if(t instanceof HTMLElement)return t.tagName.toLowerCase()===s;{let e=!0;for(const n in t)t[n].tagName.toLowerCase()!==s&&(e=!1);return e}}("button",this.dom.toggle)||this.dom.toggle.setAttribute("role","button"),""===this.dom.toggle.id||""===this.elements.controlledMenu.dom.menu.id){const e=Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,10);let t=this.dom.toggle.innerText.replace(/[^a-zA-Z0-9\s]/g,""),s=e;!t.replace(/\s/g,"").length&&this.dom.toggle.getAttribute("aria-label")&&(t=this.dom.toggle.getAttribute("aria-label").replace(/[^a-zA-Z0-9\s]/g,"")),t.replace(/\s/g,"").length>0&&(t=t.toLowerCase().replace(/\s+/g,"-"),t.startsWith("-")&&(t=t.substring(1)),t.endsWith("-")&&(t=t.slice(0,-1)),s=`${t}-${s}`),this.dom.toggle.id=this.dom.toggle.id||`${s}-menu-button`,this.elements.controlledMenu.dom.menu.id=this.elements.controlledMenu.dom.menu.id||`${s}-menu`}this.elements.controlledMenu.dom.menu.setAttribute("aria-labelledby",this.dom.toggle.id),this.dom.toggle.setAttribute("aria-controls",this.elements.controlledMenu.dom.menu.id),""!==this.closeClass&&("string"==typeof this.closeClass?this.elements.controlledMenu.dom.menu.classList.add(this.closeClass):Array.isArray(this.closeClass)&&this.closeClass.forEach((e=>{this.elements.controlledMenu.dom.menu.classList.add(e)})))}get dom(){return this.domElements}get elements(){return this.menuElements}get isOpen(){return this.show}get openClass(){return this.controlledMenuOpenClass}get closeClass(){return this.controlledMenuCloseClass}set isOpen(e){l({value:e}),this.show=e}set openClass(e){c({openClass:e}),this.controlledMenuOpenClass=e}set closeClass(e){c({closeClass:e}),this.controlledMenuCloseClass=e}expand(){this.dom.toggle.setAttribute("aria-expanded","true"),""!==this.openClass&&("string"==typeof this.openClass?this.elements.controlledMenu.dom.menu.classList.add(this.openClass):Array.isArray(this.openClass)&&this.openClass.forEach((e=>{this.elements.controlledMenu.dom.menu.classList.add(e)}))),""!==this.closeClass&&("string"==typeof this.closeClass?this.elements.controlledMenu.dom.menu.classList.remove(this.closeClass):Array.isArray(this.closeClass)&&this.closeClass.forEach((e=>{this.elements.controlledMenu.dom.menu.classList.remove(e)}))),this.dom.toggle.dispatchEvent(this.expandEvent)}collapse(){this.dom.toggle.setAttribute("aria-expanded","false"),""!==this.closeClass&&("string"==typeof this.closeClass?this.elements.controlledMenu.dom.menu.classList.add(this.closeClass):Array.isArray(this.closeClass)&&this.closeClass.forEach((e=>{this.elements.controlledMenu.dom.menu.classList.add(e)}))),""!==this.openClass&&("string"==typeof this.openClass?this.elements.controlledMenu.dom.menu.classList.remove(this.openClass):Array.isArray(this.openClass)&&this.openClass.forEach((e=>{this.elements.controlledMenu.dom.menu.classList.remove(e)}))),this.dom.toggle.dispatchEvent(this.collapseEvent)}open(){this.isOpen=!0,this.expand(),this.closeSiblings(),this.elements.parentMenu&&(this.elements.parentMenu.focusState="child"),this.elements.controlledMenu.focusState="self"}preview(){this.isOpen=!0,this.expand(),this.closeSiblings(),this.elements.parentMenu&&(this.elements.parentMenu.focusState="self"),this.elements.controlledMenu.focusState="none"}close(){this.isOpen&&(this.isOpen=!1,this.collapse(),this.closeChildren(),this.elements.controlledMenu.currentChild=0,this.elements.controlledMenu.blur(),this.elements.parentMenu&&(this.elements.parentMenu.focusState="self"))}toggle(){this.isOpen?this.close():this.open()}closeSiblings(){this.elements.parentMenu&&this.elements.parentMenu.elements.submenuToggles.forEach((e=>{e!==this&&e.close()}))}closeChildren(){this.elements.controlledMenu.elements.submenuToggles.forEach((e=>e.close()))}}class d{constructor({menuItemElement:e,menuLinkElement:t,parentMenu:s,isSubmenuItem:n=!1,childMenu:o=null,toggle:i=null}){r({menuItemElement:e,menuLinkElement:t}),l({isSubmenuItem:n}),h(null!==o?{parentMenu:s,childMenu:o}:{parentMenu:s}),null!==i&&function(e){let t="element";try{if(e instanceof a)return!0;if("object"!=typeof e||e instanceof a)throw Error;for(const s in e)if(t=s,!(e[s]instanceof a))throw Error}catch(e){throw new TypeError(`${t} must be a MenuToggle.`)}}({toggle:i}),this.domElements={item:e,link:t},this.menuElements={parentMenu:s,childMenu:o,toggle:i},this.isController=n,this.initialize()}initialize(){this.isMenubar=this.elements.parentMenu instanceof b,this.isMenubar&&(this.dom.item.setAttribute("role","none"),this.dom.link.setAttribute("role","menuitem"),this.dom.link.tabIndex=-1)}get dom(){return this.domElements}get elements(){return this.menuElements}get isSubmenuItem(){return this.isController}focus(){"mouse"!==this.elements.parentMenu.currentEvent&&this.dom.link.focus(),this.isMenubar&&this.elements.parentMenu.isTopLevel&&(this.dom.link.tabIndex=0)}blur(){"mouse"!==this.elements.parentMenu.currentEvent&&this.dom.link.blur(),this.isMenubar&&this.elements.parentMenu.isTopLevel&&(this.dom.link.tabIndex=-1)}}function f(e){!function(e){let t="event";try{if(e instanceof KeyboardEvent)return!0;if("object"!=typeof e)throw Error;for(const s in e)if(t=s,!(e[s]instanceof KeyboardEvent))throw Error}catch(e){throw new TypeError(`${t} must be a KeyboardEvent.`)}}(e);try{const t=e.key||e.keyCode,s={Enter:"Enter"===t||13===t,Space:" "===t||"Spacebar"===t||32===t,Escape:"Escape"===t||"Esc"===t||27===t,ArrowUp:"ArrowUp"===t||"Up"===t||38===t,ArrowRight:"ArrowRight"===t||"Right"===t||39===t,ArrowDown:"ArrowDown"===t||"Down"===t||40===t,ArrowLeft:"ArrowLeft"===t||"Left"===t||37===t,Home:"Home"===t||36===t,End:"End"===t||35===t,Character:!!t.match(/^[a-zA-Z]{1}$/),Tab:"Tab"===t||9===t};return Object.keys(s).find((e=>!0===s[e]))}catch(e){return""}}function p(e){!function(e){let t="event";try{if(e instanceof Event)return!0;if("object"!=typeof e)throw Error;for(const s in e)if(t=s,!(e[s]instanceof Event))throw Error}catch(e){throw new TypeError(`${t} must be an Event.`)}}(e),e.preventDefault(),e.stopPropagation()}class g{constructor({menuElement:e,menuItemSelector:t="li",menuLinkSelector:s="a",submenuItemSelector:n="",submenuToggleSelector:i="a",submenuSelector:u="ul",controllerElement:m=null,containerElement:c=null,openClass:a="show",closeClass:d="hide",isTopLevel:f=!0,parentMenu:p=null,isHoverable:g=!1,hoverDelay:b=250}){l({isTopLevel:f}),o(""!==n?{menuItemSelector:t,menuLinkSelector:s,submenuItemSelector:n,submenuToggleSelector:i,submenuSelector:u}:{menuItemSelector:t,menuLinkSelector:s}),r(null!==m||null!==c?{menuElement:e,controllerElement:m,containerElement:c}:{menuElement:e}),null!==p&&h({parentMenu:p}),this.domElements={menu:e,menuItems:[],submenuItems:[],submenuToggles:[],submenus:[],controller:m,container:c},this.domSelectors={menuItems:t,menuLinks:s,submenuItems:n,submenuToggles:i,submenus:u},this.menuElements={menuItems:[],submenuToggles:[],controller:null,parentMenu:p,rootMenu:f?this:null},this.openClass=a||"",this.closeClass=d||"",this.root=f,this.currentChild=0,this.focusState="none",this.currentEvent="none",this.isHoverable=g,this.hoverDelay=b,this.initialize()}initialize(){if(null===this.elements.rootMenu&&this.findRootMenu(this),this.setDOMElements(),this.isTopLevel&&this.dom.controller&&this.dom.container){const e=new a({menuToggleElement:this.dom.controller,parentElement:this.dom.container,controlledMenu:this,openClass:this.openClass,closeClass:this.closeClass});this.menuElements.controller=e}}get dom(){return this.domElements}get selectors(){return this.domSelectors}get elements(){return this.menuElements}get openClass(){return this.submenuOpenClass}get closeClass(){return this.submenuCloseClass}get isTopLevel(){return this.root}get currentChild(){return this.focussedChild}get focusState(){return this.state}get currentEvent(){return this.event}get currentMenuItem(){return this.elements.menuItems[this.currentChild]}get isHoverable(){return this.hoverable}get hoverDelay(){return this.delay}set openClass(e){c({openClass:e}),this.submenuOpenClass=e}set closeClass(e){c({closeClass:e}),this.submenuCloseClass=e}set currentChild(e){i({value:e}),this.focussedChild=e}set focusState(e){!function(e){u(e);const t=["none","self","child"];let s="value";try{if("object"!=typeof e){if(t.includes(e))return!0;throw Error}for(const n in e)if(s=n,!t.includes(e[n]))throw Error}catch(e){throw new Error(`${s} must be one of the following values: ${t.join(", ")}`)}}({value:e}),this.state=e}set currentEvent(e){!function(e){u(e);const t=["none","mouse","keyboard"];let s="value";try{if("object"!=typeof e){if(t.includes(e))return!0;throw Error}for(const n in e)if(s=n,!t.includes(e[n]))throw Error}catch(e){throw new Error(`${s} must be one of the following values: ${t.join(", ")}`)}}({value:e}),this.event=e}set isHoverable(e){l({value:e}),this.hoverable=e}set hoverDelay(e){i({value:e}),this.delay=e}setDOMElementType(e,t,s){if("string"!=typeof this.selectors[e])throw new Error(`${e} is not a valid element type within the menu.`);{t&&r({base:t});const n=t||this.dom.menu,o=e=>e.parentElement===n,l=this.selectors[e],i=Array.from(n.querySelectorAll(l));this.domElements[e]=void 0!==s?"function"==typeof s?i.filter((e=>s(e))):i:i.filter((e=>o(e)))}}addDOMElementType(e,t,s){if("string"!=typeof this.selectors[e])throw new Error(`${e} is not a valid element type within the menu.`);{t&&r({base:t});const n=t||this.dom.menu,o=e=>e.parentElement===n,l=this.selectors[e],i=Array.from(n.querySelectorAll(l));this.domElements[e]=void 0!==s?"function"==typeof s?[...this.domElements[e],...i.filter((e=>s(e)))]:[...this.domElements[e],...i]:[...this.domElements[e],...i.filter((e=>o(e)))]}}clearDOMElementType(e){if("menu"!==e)if(Array.isArray(this.domElements[e]))this.domElements[e]=[];else{if(void 0===this.domElements[e])throw new Error(`${e} is not a valid element type within the menu.`);this.domElements[e]=null}}setDOMElements(){this.setDOMElementType("menuItems"),""!==this.selectors.submenuItems&&(this.setDOMElementType("submenuItems"),this.clearDOMElementType("submenuToggles"),this.clearDOMElementType("submenus"),this.dom.submenuItems.forEach((e=>{this.addDOMElementType("submenuToggles",e),this.addDOMElementType("submenus",e)})))}findRootMenu(e){if(e.isTopLevel)this.menuElements.rootMenu=e;else{if(null===e.elements.parentMenu)throw new Error("Cannot find root menu.");this.findRootMenu(e.elements.parentMenu)}}createChildElements(e=g){this.dom.menuItems.forEach((t=>{let s;if(this.dom.submenuItems.includes(t)){const n=t.querySelector(this.selectors.submenuToggles),r=t.querySelector(this.selectors.submenus),o=new e({menuElement:r,menuItemSelector:this.selectors.menuItems,menuLinkSelector:this.selectors.menuLinks,submenuItemSelector:this.selectors.submenuItems,submenuToggleSelector:this.selectors.submenuToggles,submenuSelector:this.selectors.submenus,openClass:this.openClass,closeClass:this.closeClass,isTopLevel:!1,parentMenu:this,isHoverable:this.isHoverable,hoverDelay:this.hoverDelay}),l=new a({menuToggleElement:n,parentElement:t,controlledMenu:o,openClass:this.openClass,closeClass:this.closeClass,parentMenu:this});this.menuElements.submenuToggles.push(l),s=new d({menuItemElement:t,menuLinkElement:n,parentMenu:this,isSubmenuItem:!0,childMenu:o,toggle:l})}else{const e=t.querySelector(this.selectors.menuLinks);s=new d({menuItemElement:t,menuLinkElement:e,parentMenu:this})}this.menuElements.menuItems.push(s)}))}handleFocus(){this.elements.menuItems.forEach(((e,t)=>{e.dom.link.addEventListener("focus",(()=>{this.elements.parentMenu&&(this.elements.parentMenu.focusState="child"),e.elements.childMenu&&(e.elements.childMenu.focusState="none"),this.focusState="self",this.currentChild=t}))}))}handleClick(){function e(e,t,s){p(s),e.currentEvent="mouse",t.toggle(),t.isOpen&&(e.focusState="self",t.elements.controlledMenu.focusState="none")}document.addEventListener("mouseup",(e=>{"none"!==this.focusState&&(this.currentEvent="mouse",this.dom.menu.contains(e.target)||!this.dom.menu===e.target||(this.closeChildren(),this.blur(),this.elements.controller&&this.elements.controller.close()))})),this.elements.submenuToggles.forEach((t=>{m("touchend",t.dom.toggle)?t.dom.toggle.ontouchend=s=>{e(this,t,s)}:t.dom.toggle.onmouseup=s=>{e(this,t,s)}})),this.isTopLevel&&this.elements.controller&&(m("touchend",this.elements.controller.dom.toggle)?this.elements.controller.dom.toggle.ontouchend=t=>{e(this,this.elements.controller,t)}:this.elements.controller.dom.toggle.onmouseup=t=>{e(this,this.elements.controller,t)})}handleHover(){this.elements.submenuToggles.forEach((e=>{e.dom.parent.addEventListener("mouseenter",(()=>{this.isHoverable&&(this.currentEvent="mouse",e.open())})),e.dom.parent.addEventListener("mouseleave",(()=>{this.isHoverable&&setTimeout((()=>{this.currentEvent="mouse",e.close()}),this.hoverDelay)}))}))}handleKeydown(){this.isTopLevel&&this.elements.controller&&this.elements.controller.dom.toggle.addEventListener("keydown",(e=>{this.currentEvent="keyboard";const t=f(e);"Space"!==t&&"Enter"!==t||p(e)}))}handleKeyup(){this.isTopLevel&&this.elements.controller&&this.elements.controller.dom.toggle.addEventListener("keyup",(e=>{this.currentEvent="keyboard";const t=f(e);"Space"!==t&&"Enter"!==t||(p(e),this.elements.controller.open(),this.focusFirstChild())}))}focus(){this.focusState="self","mouse"!==this.currentEvent&&this.dom.menu.focus()}blur(){this.focusState="none","mouse"!==this.currentEvent&&this.dom.menu.blur(),this.isTopLevel&&this.elements.controller&&this.elements.controller.close()}focusFirstChild(){this.blurCurrentChild(),this.currentChild=0,this.focusCurrentChild()}focusLastChild(){this.blurCurrentChild(),this.currentChild=this.elements.menuItems.length-1,this.focusCurrentChild()}focusNextChild(){this.currentChild===this.elements.menuItems.length-1?this.focusFirstChild():(this.blurCurrentChild(),this.currentChild=this.currentChild+1,this.focusCurrentChild())}focusPreviousChild(){0===this.currentChild?this.focusLastChild():(this.blurCurrentChild(),this.currentChild=this.currentChild-1,this.focusCurrentChild())}focusCurrentChild(){-1!==this.currentChild&&this.currentMenuItem.focus()}blurCurrentChild(){-1!==this.currentChild&&this.currentMenuItem.blur()}focusNextChildWithCharacter(e){const t=e.toLowerCase();let s=this.currentChild+1,n=!1;for(;!n&&s<this.elements.menuItems.length;){this.elements.menuItems[s].dom.item.innerText.toLowerCase().startsWith(t)&&(n=!0,this.currentChild=s,this.focusCurrentChild()),s++}}focusController(){this.dom.controller&&("mouse"!==this.currentEvent&&this.dom.controller.focus(),this.focusState="none")}focusContainer(){this.dom.container&&("mouse"!==this.currentEvent&&this.dom.container.focus(),this.focusState="none")}closeChildren(){this.elements.submenuToggles.forEach((e=>e.close()))}}class b extends g{constructor({menuElement:e,menuItemSelector:t="li",menuLinkSelector:s="a",submenuItemSelector:n="",submenuToggleSelector:r="a",submenuSelector:o="ul",controllerElement:l=null,containerElement:i=null,openClass:u="show",closeClass:h="hide",isTopLevel:m=!0,parentMenu:c=null,isHoverable:a=!1,hoverDelay:d=250}){super({menuElement:e,menuItemSelector:t,menuLinkSelector:s,submenuItemSelector:n,submenuToggleSelector:r,submenuSelector:o,controllerElement:l,containerElement:i,openClass:u,closeClass:h,isTopLevel:m,parentMenu:c,isHoverable:a,hoverDelay:d})}initialize(){super.initialize(),this.dom.menu.setAttribute("role","menubar"),this.createChildElements(b),this.handleFocus(),this.handleClick(),this.isHoverable&&this.handleHover(),this.handleKeydown(),this.handleKeyup(),this.elements.menuItems[0].dom.link.tabIndex=0}handleKeydown(){super.handleKeydown(),this.dom.menu.addEventListener("keydown",(e=>{this.currentEvent="keyboard";const t=f(e);if("Tab"===t&&("none"!==this.elements.rootMenu.focusState?(this.elements.rootMenu.blur(),this.elements.rootMenu.closeChildren()):this.elements.rootMenu.focus()),"Character"===t)p(e);else if(this.isTopLevel){if("self"===this.focusState){const s=["Space","Enter","ArrowDown","ArrowUp"],n=["Escape"];(["ArrowRight","ArrowLeft","Home","End"].includes(t)||this.currentMenuItem.isSubmenuItem&&s.includes(t)||this.elements.controller&&n.includes(t))&&p(e)}}else{const s=["Space","Enter"];(["Escape","ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(t)||this.currentMenuItem.isSubmenuItem&&s.includes(t))&&p(e)}}))}handleKeyup(){super.handleKeyup(),this.dom.menu.addEventListener("keyup",(e=>{this.currentEvent="keyboard";const t=f(e),{altKey:s,crtlKey:n,metaKey:r}=e;if("Character"!==t||(s||n||r))if(this.isTopLevel){if("self"===this.focusState)if("Space"===t||"Enter"===t)this.currentMenuItem.isSubmenuItem&&(p(e),this.currentMenuItem.elements.toggle.open(),requestAnimationFrame((()=>{this.currentMenuItem.elements.childMenu.focusFirstChild()})));else if("ArrowRight"===t){p(e);const t=this.currentMenuItem.isSubmenuItem&&this.currentMenuItem.elements.toggle.isOpen;this.focusNextChild(),t&&(this.currentMenuItem.isSubmenuItem?this.currentMenuItem.elements.toggle.preview():this.closeChildren())}else if("ArrowLeft"===t){p(e);const t=this.currentMenuItem.isSubmenuItem&&this.currentMenuItem.elements.toggle.isOpen;this.focusPreviousChild(),t&&(this.currentMenuItem.isSubmenuItem?this.currentMenuItem.elements.toggle.preview():this.closeChildren())}else if("ArrowDown"===t)this.currentMenuItem.isSubmenuItem&&(p(e),this.currentMenuItem.elements.toggle.open(),requestAnimationFrame((()=>{this.currentMenuItem.elements.childMenu.focusFirstChild()})));else if("ArrowUp"===t)this.currentMenuItem.isSubmenuItem&&(p(e),this.currentMenuItem.elements.toggle.open(),requestAnimationFrame((()=>{this.currentMenuItem.elements.childMenu.focusLastChild()})));else if("Home"===t)p(e),this.focusFirstChild();else if("End"===t)p(e),this.focusLastChild();else if("Escape"===t){this.elements.submenuToggles.some((e=>e.isOpen))?(p(e),this.closeChildren()):this.isTopLevel&&this.elements.controller&&this.elements.controller.isOpen&&(p(e),this.elements.controller.close(),this.focusController())}}else"Space"===t||"Enter"===t?this.currentMenuItem.isSubmenuItem&&(p(e),this.currentMenuItem.elements.toggle.open(),requestAnimationFrame((()=>{this.currentMenuItem.elements.childMenu.focusFirstChild()}))):"Escape"===t?(p(e),this.elements.rootMenu.closeChildren(),this.elements.rootMenu.focusCurrentChild()):"ArrowRight"===t?this.currentMenuItem.isSubmenuItem?(p(e),this.currentMenuItem.elements.toggle.open(),requestAnimationFrame((()=>{this.currentMenuItem.elements.childMenu.focusFirstChild()}))):(p(e),this.elements.rootMenu.closeChildren(),this.elements.rootMenu.focusNextChild(),this.elements.rootMenu.currentMenuItem.isSubmenuItem&&this.elements.rootMenu.currentMenuItem.elements.toggle.preview()):"ArrowLeft"===t?this.elements.parentMenu.currentMenuItem.isSubmenuItem&&(p(e),this.elements.parentMenu.currentMenuItem.elements.toggle.close(),this.elements.parentMenu.focusCurrentChild(),this.elements.parentMenu===this.elements.rootMenu&&(this.elements.rootMenu.closeChildren(),this.elements.rootMenu.focusPreviousChild(),this.elements.rootMenu.currentMenuItem.isSubmenuItem&&this.elements.rootMenu.currentMenuItem.elements.toggle.preview())):"ArrowDown"===t?(p(e),this.focusNextChild()):"ArrowUp"===t?(p(e),this.focusPreviousChild()):"Home"===t?(p(e),this.focusFirstChild()):"End"===t&&(p(e),this.focusLastChild());else p(e),this.focusNextChildWithCharacter(e.key)}))}}class C extends g{constructor({menuElement:e,menuItemSelector:t="li",menuLinkSelector:s="a",submenuItemSelector:n="",submenuToggleSelector:r="a",submenuSelector:o="ul",controllerElement:l=null,containerElement:i=null,openClass:u="show",closeClass:h="hide",isTopLevel:m=!0,parentMenu:c=null,isHoverable:a=!1,hoverDelay:d=250}){super({menuElement:e,menuItemSelector:t,menuLinkSelector:s,submenuItemSelector:n,submenuToggleSelector:r,submenuSelector:o,controllerElement:l,containerElement:i,openClass:u,closeClass:h,isTopLevel:m,parentMenu:c,isHoverable:a,hoverDelay:d}),this.currentChild=-1}initialize(){super.initialize(),this.createChildElements(C),this.handleFocus(),this.handleClick(),this.isHoverable&&this.handleHover(),this.handleKeydown(),this.handleKeyup()}handleKeydown(){super.handleKeydown(),this.dom.menu.addEventListener("keydown",(e=>{this.currentEvent="keyboard";const t=f(e);if("self"===this.focusState){const s=["Space","Enter"],n=["Escape"],r=["Escape"];(["ArrowUp","ArrowRight","ArrowDown","ArrowLeft","Home","End"].includes(t)||this.currentMenuItem.isSubmenuItem&&s.includes(t)||this.elements.controller&&n.includes(t)||this.elements.parentMenu&&r.includes(t))&&p(e)}}))}handleKeyup(){super.handleKeyup(),this.dom.menu.addEventListener("keyup",(e=>{this.currentEvent="keyboard";const t=f(e);if("self"===this.focusState)if("Space"===t||"Enter"===t)this.currentMenuItem.isSubmenuItem&&(p(e),this.currentMenuItem.elements.toggle.preview());else if("Escape"===t){this.elements.submenuToggles.some((e=>e.isOpen))?(p(e),this.closeChildren()):this.elements.parentMenu?(p(e),this.elements.parentMenu.closeChildren(),this.elements.parentMenu.focusCurrentChild()):this.isTopLevel&&this.elements.controller&&this.elements.controller.isOpen&&(this.elements.controller.close(),this.focusController())}else"ArrowDown"===t||"ArrowRight"===t?(p(e),this.currentMenuItem.isSubmenuItem&&this.currentMenuItem.elements.toggle.isOpen?this.currentMenuItem.elements.childMenu.focusFirstChild():this.focusNextChild()):"ArrowUp"===t||"ArrowLeft"===t?(p(e),this.focusPreviousChild()):"Home"===t?(p(e),this.focusFirstChild()):"End"===t&&(p(e),this.focusLastChild())}))}focusNextChild(){this.currentChild<this.elements.menuItems.length-1&&(this.blurCurrentChild(),this.currentChild=this.currentChild+1,this.focusCurrentChild())}focusPreviousChild(){this.currentChild>0&&(this.blurCurrentChild(),this.currentChild=this.currentChild-1,this.focusCurrentChild())}}return{Menubar:b,DisclosureMenu:C}}();

package.json

 {
   "name": "accessible-menu",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A JavaScript library to help you generate WCAG accessible menus in the DOM.",
@@ -24,3 +24,3 @@ "main": "index.js",
     "release": "git add dist/. && npx standard-version -a",
-    "compile:test": "npx babel test/js --out-dir test/ie/js && npx sass test/scss:test/css",
+    "compile:test": "npx babel test/js --out-dir test/js/ie --ignore 'test/js/ie/*.js' && npx sass test/scss:test/css",
     "build": "npx rollup --config .rollup.config.js"
@@ -52,16 +52,16 @@ },
     "@babel/preset-env": "^7.12.1",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
+    "@rollup/plugin-node-resolve": "^11.2.0",
     "commitizen": "^4.2.2",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.12.1",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-config-standard": "^16.0.1",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^30.7.7",
+    "eslint-plugin-jsdoc": "^32.3.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.2",
+    "eslint-plugin-standard": "^5.0.0",
     "husky": "^4.3.0",
@@ -71,6 +71,6 @@ "prettier": "^2.1.2",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-terser": "^5.3.1",
+    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.29.0",
     "standard-version": "^9.0.0",
-    "terser": "^4.8.0"
+    "terser": "^5.6.1"
   },
@@ -77,0 +77,0 @@ "config": {

src/_baseMenu.js

@@ -617,11 +617,15 @@ import MenuToggle from "./menuToggle";
       toggle.dom.parent.addEventListener("mouseenter", () => {
-        this.currentEvent = "mouse";
-        toggle.open();
+        if (this.isHoverable) {
+          this.currentEvent = "mouse";
+          toggle.open();
+        }
       });
 
       toggle.dom.parent.addEventListener("mouseleave", () => {
-        setTimeout(() => {
-          this.currentEvent = "mouse";
-          toggle.close();
-        }, this.hoverDelay);
+        if (this.isHoverable) {
+          setTimeout(() => {
+            this.currentEvent = "mouse";
+            toggle.close();
+          }, this.hoverDelay);
+        }
       });
@@ -636,3 +640,3 @@ });
     if (this.isTopLevel && this.elements.controller) {
-      this.elements.controller.dom.toggle.addEventListener("keydown", () => {
+      this.elements.controller.dom.toggle.addEventListener("keydown", event => {
         this.currentEvent = "keyboard";
@@ -654,3 +658,3 @@
     if (this.isTopLevel && this.elements.controller) {
-      this.elements.controller.dom.toggle.addEventListener("keyup", () => {
+      this.elements.controller.dom.toggle.addEventListener("keyup", event => {
         this.currentEvent = "keyboard";
@@ -657,0 +661,0 @@

src/menubar.js

@@ -176,3 +176,6 @@ import BaseMenu from "./_baseMenu";
               this.currentMenuItem.elements.toggle.open();
-              this.currentMenuItem.elements.childMenu.focusFirstChild();
+              // This ensures the the menu is _visually_ open before the child is focussed.
+              requestAnimationFrame(() => {
+                this.currentMenuItem.elements.childMenu.focusFirstChild();
+              });
             }
@@ -229,3 +232,6 @@ } else if (key === "ArrowRight") {
               this.currentMenuItem.elements.toggle.open();
-              this.currentMenuItem.elements.childMenu.focusFirstChild();
+              // This ensures the the menu is _visually_ open before the child is focussed.
+              requestAnimationFrame(() => {
+                this.currentMenuItem.elements.childMenu.focusFirstChild();
+              });
             }
@@ -238,3 +244,6 @@ } else if (key === "ArrowUp") {
               this.currentMenuItem.elements.toggle.open();
-              this.currentMenuItem.elements.childMenu.focusLastChild();
+              // This ensures the the menu is _visually_ open before the child is focussed.
+              requestAnimationFrame(() => {
+                this.currentMenuItem.elements.childMenu.focusLastChild();
+              });
             }
@@ -279,3 +288,6 @@ } else if (key === "Home") {
             this.currentMenuItem.elements.toggle.open();
-            this.currentMenuItem.elements.childMenu.focusFirstChild();
+            // This ensures the the menu is _visually_ open before the child is focussed.
+            requestAnimationFrame(() => {
+              this.currentMenuItem.elements.childMenu.focusFirstChild();
+            });
           }
@@ -299,3 +311,6 @@ } else if (key === "Escape") {
             this.currentMenuItem.elements.toggle.open();
-            this.currentMenuItem.elements.childMenu.focusFirstChild();
+            // This ensures the the menu is _visually_ open before the child is focussed.
+            requestAnimationFrame(() => {
+              this.currentMenuItem.elements.childMenu.focusFirstChild();
+            });
           } else {
@@ -302,0 +317,0 @@ preventEvent(event);

src/menuToggle.js

@@ -54,2 +54,11 @@ import BaseMenu from "./_baseMenu";
 
+    this.expandEvent = new CustomEvent("accessibleMenuExpand", {
+      bubbles: true,
+      detail: { toggle: this },
+    });
+    this.collapseEvent = new CustomEvent("accessibleMenuCollapse", {
+      bubbles: true,
+      detail: { toggle: this },
+    });
+
     this.initialize();
@@ -242,2 +251,4 @@ }
     }
+
+    this.dom.toggle.dispatchEvent(this.expandEvent);
   }
@@ -274,2 +285,4 @@
     }
+
+    this.dom.toggle.dispatchEvent(this.collapseEvent);
   }
@@ -276,0 +289,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

207962

decreased by-8.42%

Lines of code

4583

decreased by-5.13%

No dependency changes