Not working properly With Wordpress Avada Theme

[learner0333]

I have updated menu structure as per "http://terrillthompson.com/tests/menus/accessible-mega-menu/test.html"
Javascript code is as follows:

<script src=""></script>

    <script>
    	jQuery(document).ready(function(){
			//console.log( jQuery(".fusion-secondary-main-menu nav.fusion-main-menu:first"));
			
			setTimeout(function(){
				
				jQuery(".fusion-secondary-main-menu nav.fusion-main-menu").accessibleMegaMenu({
			// prefix for generated unique id attributes, which are required 
			//   to indicate aria-owns, aria-controls and aria-labelledby //
			uuidPrefix: "accessible-megamenu",
			
			// css class used to define the megamenu styling 
			menuClass: "fusion-menu",
			
			// css class for a top-level navigation item in the megamenu 
			topNavItemClass: "menu-item-type-custom",
			
			// css class for a megamenu panel 
			panelClass: "sub-nav",
			
			// css class for a group of items within a megamenu panel 
			panelGroupClass: "sub-nav-group",
			
			// css class for the hover state 
			hoverClass: "hover",
			
			// css class for the focus state 
			focusClass: "focus",
			
			// css class for the open state 
			openClass: "open"
		});
				
				},3000);
			   
		});
    </script>

I have tried without passing parameters as well. It will not work at all. After that i have added tabedindex on li element and it starts working partially.

URL : http://accjcorg.staging.wpengine.com/

After adding tabindex issues are as follows:
1 - I need to press down keys two times to move from one sub-menu item to other
2 - Main navigation movement is not working with arrow keys as well

Please guide me abut it.

[majornista]

@learner0333 It seems that the Fusion Menu used within that theme may conflict with the structure of the accessible mega menu. Adding positive integer tab indexes shouldn't be necessary, and it seems that you are adding them to the li[role=menuitem] when the only elements that should receive keyboard focus are the links.

[LaurenceRLewis]

@learner0333

Note:
div class="sub-nav" id="accessible-megamenu-1494963384313-8" role="region" aria-expanded="false" aria-hidden="true"

• This requires a label.

You may want to read this about better support for screen readers. On March 25 this was merged with the Master.

#23

Explanation of changes by author:
The use of the Button role within the A tags gives screen reader users a clear indication which controls are meant to toggle hidden panels versus standard A tags that navigate away from the page, also allowing them to use the B or Shift+B quick navigation key commands to quickly jump past open panels and to the next toggle control, which aids navigation for non-sighted users.

The use of aria-haspopup on the toggle links is an invalid use of ARIA, because the aria-haspopup attribute is specifically dedicated within the Accessibility API to indicate that there is an attached menu. Since the content panels include both static textual content and links, it can't be accurately described as a menu construct. Screen readers such as NVDA for instance will announce "submenu" when encountering this for instance, which is confusing when a traditional menu doesn't actually open when activated. This issue is more fully described in the W3C bug at
https://www.w3.org/Bugs/Public/show_bug.cgi?id=25851

The use of role="group" here to associate grouped content panels is an invalid use of ARIA, because the group role has only a few valid uses including the association of sub-tree structures within an ARIA role="tree" control, but not much else. Also, when the panels are dynamically rendered, aria-labelledby is used to associate the grouped panel name with the triggering link, none of which works within role="group". Additionally, since the group role isn't treated as a region, none of the screen reader commands for detecting and navigating grouped region content are available, such as conveying the beginning and ending boundaries of the content panel, what the name of that panel is via aria-labelledby, nor the ability to quickly jump to and past the panel using the R and Shift+R key commands in JAWS for example.

By changing the role to "region" instead, all of these features suddenly become available, conveying the panel as an explicitly named region that includes beginning and ending boundaries, plus the ability to quickly navigate to and from the panel using available hotkeys for jumping between regions. Confirmed using JAWS and NVDA in IE and FF.

The dual functionality of the toggle links is still an accessibility issue, because it can't do both, expand a hidden section and also navigate to another page when activated, because both functionalities can't be conveyed to non-sighted screen reader users at the same time.

[learner0333]

I didn't understand, How to fix the issue . I have already modified the Menu structure as required by the Accessible mega menu plugin.

[benipal95]

Update the case Keyboard.TAB: by replacing the whole case with the following code in main.js:

case Keyboard.TAB:
i = tabbables.index(target);
                   if (isTopNavItem) {
                        _togglePanel.call(that, event);
                        found = (topli.find('.' + settings.panelClass + ' :tabbable:first').focus().length === 1);
                    }
                   else if (event.shiftKey && isTopNavItem && target.hasClass(settings.openClass)) {
                        _togglePanel.call(that, event, true);
                        next = topnavitems.filter(':lt(' + topnavitems.index(topli) + '):last');
                        if (next.children('.' + settings.panelClass).length) {
                            found = next.children()
                                .attr('aria-expanded', 'true')
                                .addClass(settings.openClass)
                                .filter('.' + settings.panelClass)
                                .attr('aria-hidden', 'false')
                                .find(':tabbable:last')
                                .focus();
                        }
                    } else if (event.shiftKey && i > 0) {
                        found = (tabbables.filter(':lt(' + i + '):last').focus().length === 1);
                    } else if (!event.shiftKey && i < tabbables.length - 1) {
                        found = (tabbables.filter(':gt(' + i + '):first').focus().length === 1);
                    } else if (window.opera && opera.toString() === "[object Opera]") {
                        tabbables = $(':tabbable');
                        i = tabbables.index(target);
                        if (event.shiftKey) {
                            found = ($(':tabbable:lt(' + $(':tabbable').index(target) + '):last').focus().length === 1);
                        } else {
                            found = ($(':tabbable:gt(' + $(':tabbable').index(target) + '):first').focus().length === 1);
                        }
                    }

                    if (found) {
                        event.preventDefault();
                    }
                    break;

[mueezPL]

Not working in Firefox in MAC after replacing this.

[m80her]

Commented on Firefox Mac here #68