Tagged: accessibility, Keyboard, menu, tab
-
AuthorPosts
-
August 28, 2024 at 10:09 am #1465547
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 mennuCurrent 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 #1465897Hey 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,
MikeSeptember 2, 2024 at 12:39 pm #1466039Hi 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, 1 week ago by tom.
September 2, 2024 at 3:11 pm #1466049For 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();
September 3, 2024 at 4:53 pm #1466146Hi,
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,
MikeSeptember 4, 2024 at 9:29 am #1466192Hi,
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, 1 week ago by tom.
September 4, 2024 at 11:45 am #1466202Hi,
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 -
AuthorPosts
- The topic ‘Menu Focus Trap / Accessibility / Keyboard usage – Improvement’ is closed to new replies.