demo/dist/demo.js
function bindMenuItemShortcuts(menuItem, type) {
	    var _this2 = this;

	    // Navigate through menus via arrow keys and space
	    on(menuItem, 'keydown keyup', function (event) {
	      // We only care about space and ⬆️ ⬇️️ ➡️
	      if (![32, 38, 39, 40].includes(event.which)) {
	        return;
	      } // Prevent play / seek


	      event.preventDefault();
	      event.stopPropagation(); // We're just here to prevent the keydown bubbling

	      if (event.type === 'keydown') {
	        return;
	      }

	      var isRadioButton = matches$1(menuItem, '[role="menuitemradio"]'); // Show the respective menu

	      if (!isRadioButton && [32, 39].includes(event.which)) {
	        controls.showMenuPanel.call(_this2, type, true);
	      } else {
	        var target;

	        if (event.which !== 32) {
	          if (event.which === 40 || isRadioButton && event.which === 39) {
	            target = menuItem.nextElementSibling;

	            if (!is$1.element(target)) {
	              target = menuItem.parentNode.firstElementChild;
	            }
	          } else {
	            target = menuItem.previousElementSibling;

	            if (!is$1.element(target)) {
	              target = menuItem.parentNode.lastElementChild;
	            }
	          }

	          setFocus.call(_this2, target, true);
	        }
	      }
	    }, false); // Enter will fire a `click` event but we still need to manage focus
	    // So we bind to keyup which fires after and set focus here

	    on(menuItem, 'keyup', function (event) {
	      if (event.which !== 13) {
	        return;
	      }

	      controls.focusFirstMenuItem.call(_this2, null, true);
	    });
	  }
function bindMenuItemShortcuts(menuItem, type) {
	    var _this2 = this;

	    // Navigate through menus via arrow keys and space
	    on(menuItem, 'keydown keyup', function (event) {
	      // We only care about space and ⬆️ ⬇️️ ➡️
	      if (![32, 38, 39, 40].includes(event.which)) {
	        return;
	      } // Prevent play / seek


	      event.preventDefault();
	      event.stopPropagation(); // We're just here to prevent the keydown bubbling

	      if (event.type === 'keydown') {
	        return;
	      }

	      var isRadioButton = matches$1(menuItem, '[role="menuitemradio"]'); // Show the respective menu

	      if (!isRadioButton && [32, 39].includes(event.which)) {
	        controls.showMenuPanel.call(_this2, type, true);
	      } else {
	        var target;

	        if (event.which !== 32) {
	          if (event.which === 40 || isRadioButton && event.which === 39) {
	            target = menuItem.nextElementSibling;

	            if (!is$1.element(target)) {
	              target = menuItem.parentNode.firstElementChild;
	            }
	          } else {
	            target = menuItem.previousElementSibling;

	            if (!is$1.element(target)) {
	              target = menuItem.parentNode.lastElementChild;
	            }
	          }

	          setFocus.call(_this2, target, true);
	        }
	      }
	    }, false); // Enter will fire a `click` event but we still need to manage focus
	    // So we bind to keyup which fires after and set focus here

	    on(menuItem, 'keyup', function (event) {
	      if (event.which !== 13) {
	        return;
	      }

	      controls.focusFirstMenuItem.call(_this2, null, true);
	    });
	  }
function bindMenuItemShortcuts ( menuItem , type ) { var _this2 = this ; // Navigate through menus via arrow keys and space on ( menuItem , 'keydown keyup' , function ( event ) { // We only care about space and ⬆️ ⬇️️ ➡️ if ( ! [ 32 , 38 , 39 , 40 ] . includes ( event . which ) ) { return ; } // Prevent play / seek event . preventDefault ( ) ; event . stopPropagation ( ) ; // We're just here to prevent the keydown bubbling if ( event . type === 'keydown' ) { return ; } var isRadioButton = matches$1 ( menuItem , '[role="menuitemradio"]' ) ; // Show the respective menu if ( ! isRadioButton && [ 32 , 39 ] . includes ( event . which ) ) { controls . showMenuPanel . call ( _this2 , type , true ) ; } else { var target ; if ( event . which !== 32 ) { if ( event . which === 40 || isRadioButton && event . which === 39 ) { target = menuItem . nextElementSibling ; if ( ! is$1 . element ( target ) ) { target = menuItem . parentNode . firstElementChild ; } } else { target = menuItem . previousElementSibling ; if ( ! is$1 . element ( target ) ) { target = menuItem . parentNode . lastElementChild ; } } setFocus . call ( _this2 , target , true ) ; } } } , false ) ; // Enter will fire a `click` event but we still need to manage focus // So we bind to keyup which fires after and set focus here on ( menuItem , 'keyup' , function ( event ) { if ( event . which !== 13 ) { return ; } controls . focusFirstMenuItem . call ( _this2 , null , true ) ; } ) ; }
Bind keyboard shortcuts for a menu item We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
Bind keyboard shortcuts for a menu item We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus https : // bugzilla . mozilla . org / show_bug . cgi?id = 1220143