Make WordPress Core

Ticket #31527: 31527.twentyfourteen.patch

File 31527.twentyfourteen.patch, 1.6 KB (added by lancewillett, 10 years ago)

Add ARIA attribute toggle behavior to Twenty Fourteen

  • wp-content/themes/twentyfourteen/js/functions.js

     
    77 */
    88( function( $ ) {
    99        var body    = $( 'body' ),
    10                 _window = $( window );
     10                _window = $( window ), nav, button, menu, secondary;
    1111
     12        nav = $( '#primary-navigation' );
     13        button = nav.find( '.menu-toggle' );
     14        menu = nav.find( '.nav-menu' );
     15        secondary = $( '#secondary' );
     16
    1217        // Enable menu toggle for small screens.
    1318        ( function() {
    14                 var nav = $( '#primary-navigation' ), button, menu;
    15                 if ( ! nav ) {
     19                if ( ! nav || ! button ) {
    1620                        return;
    1721                }
    1822
    19                 button = nav.find( '.menu-toggle' );
    20                 if ( ! button ) {
    21                         return;
    22                 }
    23 
    2423                // Hide button if menu is missing or empty.
    25                 menu = nav.find( '.nav-menu' );
    2624                if ( ! menu || ! menu.children().length ) {
    2725                        button.hide();
    2826                        return;
     
    109107                } );
    110108        } );
    111109
     110        // Add or remove ARIA attributes.
     111        function onResizeARIA() {
     112                if ( 781 > _window.width() ) {
     113                        button.attr( 'aria-expanded', 'false' );
     114                        secondary.attr( 'aria-expanded', 'false' );
     115                        button.attr( 'aria-controls', 'secondary' );
     116                } else {
     117                        button.removeAttr( 'aria-expanded' );
     118                        secondary.removeAttr( 'aria-expanded' );
     119                        button.removeAttr( 'aria-controls' );
     120                }
     121        }
     122
     123        _window
     124                .on( 'load.twentyfourteen', onResizeARIA )
     125                .on( 'resize.twentyfourteen', function() {
     126                        onResizeARIA();
     127        } );
     128
    112129        _window.load( function() {
    113130                // Arrange footer widgets vertically.
    114131                if ( $.isFunction( $.fn.masonry ) ) {