-
Posts
-
Hi,
I would appreciate some help with the MegaMenu submenu items keyboard accessibility.
I used to have an adapted avia-snippet-megamenu.js in my child theme to take care of this (as described in https://kriesi.at/support/topic/accessibility-issues-with-main-nav-leaves-us-sites-in-danger-of-lawsuits/#post-1226327)
Now I had a look at the avia-snippet-megamenu.js from 4.8.6.3, and it looks like this functionality is already included there, am I right?
However, if I place the new 4.8.6.3 file avia-snippet-megamenu.js in the child theme /js folder, the submenu items are not keyboard accessible.
In the child theme /js folder I have put the old file as avia-snippet-megamenu_2020-10-06.js and the new file as avia-snippet-megamenu.js and as avia-snippet-megamenu_4.8.6.3ORG.js
Can you let me know what I’m doing wrong here? I would appreciate it if you could have a look. Details in the private area (development site copy, so feel free to try).
BTW, the replacement is set in child theme functions.php line 687-690, but probably not done right (gives notice in debug log).
Thanks in advance for your help and advice,
RobHey Rob,
Thank you for the inquiry.
For the mega menu, you have to modify the /enfold/js/avia-snippet-megamenu.js file, around line 175, look for this code..
//bind event for mega menu megaItems.each(function(i){ $(this).on('mouseenter', function() { delayCheck[i] = true; setTimeout(function(){megaDivShow(i); },options.delay); }).on('mouseleave', function() { delayCheck[i] = false; setTimeout(function(){megaDivHide(i); },options.delay); } );Replace it with:
//bind event for mega menu megaItems.each(function(i){ $(this).find("a").on('focus', function() { delayCheck[i] = true; setTimeout(function(){megaDivShow(i); },options.delay); }).on('blur', function() { delayCheck[i] = false; setTimeout(function(){megaDivHide(i); },options.delay); } ); $(this).on('mouseenter', function() { delayCheck[i] = true; setTimeout(function(){megaDivShow(i); },options.delay); }).on('mouseleave', function() { delayCheck[i] = false; setTimeout(function(){megaDivHide(i); },options.delay); } ); });Please toggle or temporarily disable the Enfold > Performance > File Compression settings after doing the modificaiton.
Best regards,
IsmaelHi Ismael,
Thanks for looking into this. I replaced the code in the file like you said, but unfortunately it does not make the submenus keyboard accessible. Also, once the Enfold file compression is enabled again, it blanks the top image on home page and the images on the Tours, Impressions and Info pages, so something is not quite right yet.
I have left the replaced code in place on the dev site so you can see (also there as avia-snippet-megamenu_2021-10-04.js).
On the live website the avia-snippet-megamenu_2020-10-06.js code (also there on dev site) works well on submenus (see Blog and Info menu): https://mforamsterdam.comCan you take another look?
Also, if you could check how I did the js replacement in child theme functions.php line 687-690, I would appreciate your advice for improvement (now gives a notice in debug log).Thanks and have a good day,
RobHi!
Thank you for the update.
There are no mega menu in the site posted above. Tabbing through the items with regular dropdown works fine. Please create a mega menu so that we can check the issue. You should also keep the file compression settings disabled while testing the modification.
Regards,
IsmaelHi,
Sorry, my bad to call it mega menu, I thought it was called that (because of js filename). I mean the menu with submenu items. Let me call it the menu then, but that doesn’t change the fact that with the old code the submenu items are kb accessible, with the new code not :-)
Of course I kept the compression disabled initally while testing, just switched it on later.
So regardless of the name for the menu, how do I get the code functioning for the keyboard access for the submenu items again?Just to be clear: the production website mentioned above has the adapted 2020-10-06 version active (so from last year), the development website has the adapted 2021-10-04 version active (your adapted version).
Remark:
On the development copy I have put the 2020-10-06 version back, so you check that with this one the submenu keyboard access does work (Blog & Info have subitems). After that, feel free to try with the adapted 2021-10-04 version, re-enable compression and see what happens to the top image on the home page, the images on the tours portfolio and single tours, the images in the iimpressions portfolio.Regards,
RobHi,
Thank you for the clarification.
The following code is not yet included in the latest version of the avia-snippet-megamenu.js file, so you will have to add it manually.
currentLink.on('focus', function () { sublist.stop().css({ visibility: 'visible' }).animate({ opacity: 1 }); sublist.find('li:last-child').on('focusout', function () { sublist.stop().animate({ opacity: 0 }, function () { sublist.css({ visibility: 'hidden' }); }); }); });This should work for regular dropdowns. The previous modification above is intended for mega menus.
Best regards,
IsmaelHi,
For nested sub menus, you will have to do this modification.
Or add this code instead.
currentLink.on('focus', function () { sublist.stop().css({ visibility: 'visible' }).animate({ opacity: 1 }); currentItem.css("z-index", 1000); sublist.find('li:last-child').on('focusout', function () { var parent = sublist.parent(".menu-item"); var nextMenu = parent.next(); var submenu = $(this).parent(".sub-menu"); if(nextMenu) { nextMenu.trigger("mouseenter").focus(); submenu.stop().animate({ opacity: 0 }, function () { submenu.css({ visibility: 'hidden' }); }); return; } sublist.stop().animate({ opacity: 0 }, function () { sublist.css({ visibility: 'hidden' }); }); }); });Best regards,
IsmaelHi Ismael,
Thanks for looking into this and for your time. Sorry for the confusion, I wrongly assumed the normal menu was called Mega because the behaviour was modified in the avia-snippet-megamenu.js file… :-)
I will give this a go today and let you know the results here.
Will this code be added to the next Enfold update? I imagine there must be more people needing keyboard accessibility.RESULT:
Your modification works perfectly for getting the submenu items keyboard accessible. Thanks again, you’re a star!Have a nice day,
RobHi,
Thanks so much for the modification to the avia-snippet-megamenu.js file, it works perfectly.
On a related note, what is the proper way to replace the parent theme script with the modified child theme version?
Doing it the wrong way works, and I can’t seem to find the right working way to replace it.When I do it the wrong way, like this:
// add child theme adapted megamenu.js for keyboard accessibility of submenus wp_dequeue_script('avia-megamenu'); wp_enqueue_script('avia-megamenu', get_stylesheet_directory_uri().'/js/avia-snippet-megamenu.js', array('avia-default'), '', true);it works fine, but then of course I get debug notices:
Notice: wp_dequeue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. This notice was triggered by the avia-megamenu handle. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /usr/local/www/mforams2/wp-includes/functions.php on line 5663 Notice: wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. This notice was triggered by the avia-megamenu handle. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /usr/local/www/mforams2/wp-includes/functions.php on line 5663When I (try) to do it the proper way, it does not seem to replace the parent theme one. I tried it like this:
// add child theme adapted megamenu.js for keyboard accessibility of submenus function change_aviamegamenujs () { wp_dequeue_script( 'avia-megamenu' ); wp_enqueue_script( 'avia-megamenu', get_stylesheet_directory_uri().'/js/avia-snippet-megamenu.js', array('avia-default'), '', true ); } add_action( 'wp_print_scripts', 'change_aviamegamenujs', 100 );Remark: the replacement is in child theme functions.php line 687.
Can you help me do it the proper way? Thanks in advance!
Rob
Hi,
Never mind, I found the proper solution in another forum post:
https://kriesi.at/support/topic/tabs-select-on-hover/#post-1307497
which adapted seems to be working well:// add child theme adapted megamenu.js for keyboard accessibility of submenus function change_megamenujs() { wp_dequeue_script( 'avia-megamenu' ); wp_deregister_script( 'avia-megamenu' ); wp_enqueue_script( 'avia-megamenu', get_stylesheet_directory_uri().'/js/avia-snippet-megamenu.js', array('jquery'), 3, true ); } add_action( 'wp_enqueue_scripts', 'change_megamenujs', 100 );Thanks for the support, issue solved.
Have a good day!
Rob
- The topic ‘MegaMenu submenu items keyboard accsessibility’ is closed to new replies.