MINIMALLY INVASIVE WCAG 2.1 COMPATIBLE MENU ADD-ON (as an afterthought)

add_aria_toggle.js

    /**
     * MINIMALLY INVASIVE WCAG 2.1 COMPATIBLE MENU ADD-ON (as an afterthought).
     * 
     * This example code provides the opportunity for a developer to make a menu that could possibly
     * conform to WCAG 2.0 AA https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/ guidelines, 
     * if the developer follows and meets all realted WCAG 2.1 AA criteria. 
     * 
     * The script is intended to add an independent toggle button with ARIA and keyboard support without interfering with the current menu functionality.
     * Compliance would likely require the toggle to be 44px. You can do that optionally in the Plugin's mm_toggle_styles options.
     * 
     * The software/code is provided "As is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, 
     * fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, 
     * damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software 
     * or the use or other dealings in the software/code.
     * 
     */

(function($){

    $.fn.extend({ 
        //pass the options variable to the function
        add_aria_toggle: function(options) {
            console.log('add_aria_toggle called');

           //Set the default values, use comma to separate the settings, example:
           var defaults = {
                mm_show_styles: { 'display': 'block', 'opacity': '1'},
                mm_hide_styles: { 'display': 'none' , 'opacity': '0'},
                mm_toggle_styles: { 'display': 'inline-block', 
                                    'min-width': '20px', 
                                    'float': 'left', 
                                    'position': 'absolute', 
                                    'color': '#eee',
                                    'height':'100%', 
                                    'border': '0', 
                                    'background': 'transparent', 
                                },
                mm_menu_link_styles: {},
                mm_aria_label: 'main',
           }
        
           var options =  $.extend(defaults, options);

            return this.each(function() {
               var o = options;
               

                function mm_a11yToggle($mm_item) {
                    // add actions to toggle button
                    $mm_itemToggle = $('.wcag-toggle').css(o.mm_toggle_styles);
        
                    // Keyboard toggle
                    $mm_itemToggle.bind('click', function () {
                        var expandedState = $(this).attr('aria-expanded');
        
                        if (expandedState == 'true') {
                            $(this).attr('aria-expanded', 'false');
                            $(this).next().css(o.mm_hide_styles);
                        }
                        else {
                            $(this).attr('aria-expanded', 'true');
                            $(this).next().css(o.mm_show_styles);
                        }
                    });
                    // mouse hover
                    $mm_item.bind('mouseenter', function () {
                        $(this).find('> button').attr('aria-expanded', 'true');
                        $(this).find('> ul').css(o.mm_show_styles);
                    });
                    $mm_item.bind('mouseleave', function () {                    
                        $(this).find('> button').attr('aria-expanded', 'false');
                        $(this).find('> ul').css(o.mm_hide_styles);
                    });
        
                    // screen reader support ofr JAWS, NVDA, and VoiceOver
                    $('.wcag-toggle').focus(function (e) {
        
                        $(this).keydown(function (e) {
                            var expandedState = $(this).attr('aria-expanded');
                            if (e.keyCode === 32) {  // spacebar
                                if (expandedState == 'true') {
                                    $(this).next().find('a').first().focus();
                                }
                                else {
                                    $(this).click();
                                    $(this).next().find('a').first().focus();
                                }
                                return false
                            }
                            if (e.keyCode === 40) { // down arrow
                                if (expandedState == 'true') {
                                    $(this).next().find('a').first().focus();
                                }
                                else {
                                    $(this).parent().next().find('a').focus();
                                }
                                return false
                            }
                            if (e.keyCode === 38) { // up arrow
                                $(this).prev('a').focus();
                                return false
                            }
                        });
                    });
                }

                // assign elements
                $mm_item = $(this);
                $mm_wrapper = $mm_item.closest('nav');
                $mm_item_with_sub = $mm_item.has('ul');
                // add toggle
                $mm_item_with_sub.find('> a').after('<button aria-haspopup="true" aria-expanded="false" class="wcag-toggle"><span aria-hidden="true">&#9661;</span><span class="sr-only element-invisible">Toggle</span></button>');
                // add attributes
                $mm_wrapper.attr('aria-label', o.mm_aria_label);
                $mm_item_with_sub.find('> ul').css(o.mm_hide_styles);
  
                // Run the function
                mm_a11yToggle($mm_item_with_sub);
               
            });
        }
   });
   
})(jQuery);


jQuery(document).ready(function($){

    $('#site-navigation ul.onepress-menu:first > .menu-item').add_aria_toggle({
        mm_show_styles: { 'display': 'block'},
        mm_hide_styles: { 'display': 'none' },
        mm_toggle_styles: { 'display': 'inline-block', 
                            'min-width': '20px', 
                            'float': 'left', 
                            'position': 'absolute', 
                            'color': '#eee',
                            'height':'100%', 
                            'border': '0', 
                            'background': 'transparent', 
                            'z-index': '100'
                        },
        mm_menu_link_styles: {'display': 'inline-block'}
    });

    /* optionally you could move some of the inline styles to the stylesheet and leave the 'mm_toggle_styles' option blank

    .wcag-toggle {
        display: inline-block; 
        min-width: 20px; 
        float: left;
        position: absolute;
        color: #eee;
        height: 100%; 
        border: 0; 
        background: transparent;    
    }
    */

}( jQuery ));