Menu Focus Trap / Accessibility / Keyboard usage - Improvement - Support

Tagged: accessibility, Keyboard, menu, tab

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

August 28, 2024 at 10:09 am #1465547

tom

Participant

Hi there,

when you use any Page with Enfold and an enabled “Burger” Button with the Keyboard.
Demo Page: https://kriesi.at/themes/enfold-creative-studio/

You can access the top-main menu, by use the Tab-key to get to the Burger-icon and then Enter-key it opens. Fine!
Then you can Tab-through the menu-items, also fine.

But at the end of the menu, one would expect to:
A: Jump back to the Burger Icon, close with Enter-key and Tab-key to get further on the page
B: Jump to the next Content AND visible close the Menu-layer.
C: Use the ESC-key to close the mennu

Current Situation:
With Tab-key at the end of the menu you jump to the next content AND the menu stays visible so you wont see the page contents you are tabbing and only a reload of the page can fix it. Also ESC-key is not activated.

August 31, 2024 at 5:00 pm #1465897

Mike

Moderator

Hey tom,
To close the burger with the Esc key, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function close_burger_on_esc_key() { ?>
  <script>
(function($){
  $(document).keydown(function(e) {
    if (e.keyCode === 27) {
      $('.av-hamburger').removeClass('is-active');
      $('html').removeClass('av-burger-overlay-active');
      $('html').removeClass('av-burger-overlay-active-delayed');
      $('.av-burger-overlay').css({ 'display' : 'none', 'opacity' : 0 });
    }
  });
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'close_burger_on_esc_key', 99 );

I tested this on the demo that you linked to and it works.

Best regards,
Mike

September 2, 2024 at 12:39 pm #1466039

tom

Participant

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 weeks, 4 days ago by tom.

September 2, 2024 at 3:11 pm #1466049

tom

Participant

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 weeks, 2 days ago by tom.
This reply was modified 3 weeks, 2 days ago by tom.

September 3, 2024 at 4:53 pm #1466146

Mike

Moderator

Hi,
It sounds like you have this sorted out, when I test on our demo I don’t see any errors and it seems to work as expected. Shall we close this thread then?
If you would like to summit this as a feature the Dev Team has opened a new Github Feature Request for users to place requests and follow them as the Dev Team reviews them.

Best regards,
Mike

September 4, 2024 at 9:29 am #1466192

tom

Participant

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 weeks, 2 days ago by tom.

September 4, 2024 at 11:45 am #1466202

Mike

Moderator

Hi,
Glad that you have this sorted out, please note that the Dev Team is open to Feature Requests but they also have to be careful about how these might affect other users. If you still think that this should be added to the core please submit directly, thank you.
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Menu Focus Trap / Accessibility / Keyboard usage – Improvement’ is closed to new replies.