awccesibility to WCAG

The tab will travel to the sub-menu items if you hold them open by mousing over them before you tab. Observing this leads me to believe that the issue is with the code that opens the sub-menu on rollover. The open sub-menu action needs to be triggered by onfocus() event as well as the existing onmouseover().

The file involved is:
wp-content/themes/enfold/js/avia.js

around line 1200

This opens the submenu successfully on tabbing to it, but I can’t get it to close correctly.

currentLink.bind('focus', function()
	{
		sublist.stop().css({visibility:'visible'}).animate({opacity:1});
	});

This is as close as I can get – but it closes the submenu after tabbing off the first item in the submenu:

sublist.bind('focusout', function()
	{
		sublist.css({visibility:'hidden'});
     .... etc....

I need to find the focusout event on the entire submenu ul. Right now it seems to be catching the focusout event of the first li.

Please help. This issue is keeping me from using Enfold on my latest project which is a government affiliated website which has to follow ACCESSIBILITY guidelines in WCAG 2.0.

Thanks

• This reply was modified 8 years, 2 months ago by galpinr.

Thanks Andy. I have loaded the plugin Max Mega Menu and with a few tweaks to get the default mobile menu hidden, I think I have a solution that will allow me to use the theme. The drag & drop admin for ENFOLD is the best I have used. So, it is worth tweaking other elements to get it ACCESSIBLE. Hopefully, accessibility will become important enough in the near future that the theme will be updated to cover the requirement.

Thanks for looking into the issue as I would much rather use the default menu once it is updated to the WCAG 2.0 standard.