Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • Hi,

    Yes it works, although i still fiddle around with some labeling of the menu icon.
    Usually i would make a git fork of your theme and provide some pull requests, but i will checkout the possibilities.

    I have other solutions as well for some topics of my client which uses your theme so i may will use it.

    best,
    tom

    • This reply was modified 3 months, 2 weeks ago by tom.

    For further info:

    The overlaying Menu is created after the first opening event so setting an event listener directly leeds to some errors. Also i was able to incorporate the focusin event when leaving the menu

          /**
           * Barrierfree Menu Close with ESC Key
           * - enhance Enfold menu keyboard usabillity
           * @see https://kriesi.at/support/topic/menu-focus-trap-accessibility-keyboard-usage-improvement
           */
          var enfold_menu_close_by_key = function(){
            var options = {
                  key_code: 27, // ESC
                  classNames:{
                    active: 'is-active',
                    container_active: 'av-burger-overlay-active',
                    container_active_delayed: 'av-burger-overlay-active-delayed',
                  },
                  selectors: {
                    trigger: '.av-hamburger',
                    container: 'html',
                    overlay: '.av-burger-overlay',
                  }
                },
                trigger = document.querySelector(options.selectors.trigger),
                container = document.querySelector(options.selectors.container),
                overlay = null,
                has_overlay = function(){
                  if ( !( overlay instanceof HTMLElement ) ) {
                    overlay = document.querySelector(options.selectors.overlay);
                  }
                  return overlay instanceof HTMLElement ? true : false;
                },
                menu_close = function(){
                  var classNames = options.classNames;
                  
                  if ( trigger.classList.contains(classNames.active) ) {
                    trigger.classList.remove(classNames.active);
                    
                    container.classList.remove(classNames.container_active);
                    container.classList.remove(classNames.container_active_delayed);
                    
                    overlay.style.display = 'none';
                    overlay.style.opacity = 0;
                  }
                };
            
            if ( trigger instanceof HTMLElement ) { // if a menu trigger is used
              document.addEventListener('focusin', function(event){
                if ( has_overlay() && !event.composedPath().includes(overlay) ) {
                  // close the menu if any
                  menu_close();
                }
              });
            
              document.addEventListener('keydown', function(event){
                if ( has_overlay() && event.keyCode === options.key_code ) {
                  // close the menu
                  menu_close();
                }
              });
            }
          };
    
      enfold_menu_close_by_key();
    • This reply was modified 3 months, 2 weeks ago by tom.
    • This reply was modified 3 months, 2 weeks ago by tom.

    Hi Thank you for your response.

    i implemented it that way:

    
          /**
           * Barrierfree Menu Close with ESC Key
           * - enhance Enfold menu keyboard usabillity
           * @see https://kriesi.at/support/topic/menu-focus-trap-accessibility-keyboard-usage-improvement
           */
          enfold_menu_close_by_key = function(){
            var options = {
                  key_code: 27, // ESC
                  classNames:{
                    active: 'is-active',
                    container_active: 'av-burger-overlay-active',
                    container_active_delayed: 'av-burger-overlay-active-delayed',
                  },
                  selectors: {
                    trigger: '.av-hamburger',
                    container: 'html',
                    overlay: '.av-burger-overlay',
                  }
                },
                trigger = document.querySelector(options.selectors.trigger),
                container,
                overlay,
                menu_close = function(){
                  var classNames = options.classNames;
                  
                  if ( trigger.classList.contains(classNames.active) ) {
                    trigger.classList.remove(classNames.active);
                    
                    container.classList.remove(classNames.container_active);
                    container.classList.remove(classNames.container_active_delayed);
                    
                    overlay.style.display = 'none';
                    overlay.style.opacity = 0;
                  }
                };
            
            if ( trigger instanceof HTMLElement ) { // if an overlay is used
              document.addEventListener('keydown', function(event){
                if ( event.keyCode === options.key_code ) {
                  // get elements only once
                  if ( typeof container === 'undefined' ) {
                    container = document.querySelector(options.selectors.container);
                  }
                  if ( typeof overlay === 'undefined' ) {
                    overlay = document.querySelector(options.selectors.overlay);
                  }
                  // close the menu
                  menu_close();
                }
              });
            }
          },
    
      enfold_menu_close_by_key();
          

    While it works fine i seem to need some text-hint near the close button.
    Anyway i hoped you will consider it for an update, so i will work on my own solution.

    • This reply was modified 3 months, 2 weeks ago by tom.
Viewing 3 posts - 1 through 3 (of 3 total)