WordPress.org

Make WordPress Core

Ticket #30575: new_functions.patch

File new_functions.patch, 1.9 KB (added by agkozak, 4 years ago)

Patch for Twenty Fourteen dropdown menus that works with tabbing (a11y)

  • .js

    old new  
    122122        } );
    123123
    124124        /**
     125         * Enable hover for dropdown menu for touch devices
     126         *
     127         * Modification of patch 30575 by Richard van Denderen
     128         * @link https://core.trac.wordpress.org/attachment/ticket/30575/30575.patch
     129         */
     130        function touchDropdown() {
     131                if ( 781 > _window.width() ) {
     132                        $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
     133                                $( this ).parents().toggleClass( 'focus' );
     134                        } );
     135                        if ( 'ontouchstart' in window ) {
     136                                $( document.body ).off( 'touchstart.twentyfourteen' );
     137                        }
     138                } else {
     139                        if ( 'ontouchstart' in window ) {
     140                                $( document.body ).on( 'touchstart.twentyfourteen',  '.menu-item-has-children > a, .page_item_has_children > a', function( e ) {
     141                                        var el = $( this ).parent( 'li' );
     142
     143                                        if ( ! el.hasClass( 'focus' ) ) {
     144                                                e.preventDefault();
     145                                                el.toggleClass( 'focus' );
     146                                                el.siblings( '.focus' ).removeClass( 'focus' );
     147                                        }
     148                                } );
     149                        }
     150                }
     151        }
     152
     153        /**
    125154         * @summary Add or remove ARIA attributes.
    126155         * Uses jQuery's width() function to determine the size of the window and add
    127156         * the default ARIA attributes for the menu toggle if it's visible.
     
    132161                        button.attr( 'aria-expanded', 'false' );
    133162                        menu.attr( 'aria-expanded', 'false' );
    134163                        button.attr( 'aria-controls', 'primary-menu' );
     164                        $( '.menu-item-has-children' ).attr( 'aria-haspopup', 'false' );
    135165                } else {
    136166                        button.removeAttr( 'aria-expanded' );
    137167                        menu.removeAttr( 'aria-expanded' );
    138168                        button.removeAttr( 'aria-controls' );
     169                        $( '.menu-item-has-children' ).attr( 'aria-haspopup', 'true' );
    139170                }
    140171        }
    141172
    142         _window
    143                 .on( 'load.twentyfourteen', onResizeARIA )
    144                 .on( 'resize.twentyfourteen', function() {
     173        _window.on( 'load.twentyfourteen resize.twentyfourteen', function() {
     174                        touchDropdown();
    145175                        onResizeARIA();
    146176        } );
    147177