WordPress.org

Make WordPress Core

Changeset 31784


Ignore:
Timestamp:
03/15/2015 07:59:53 PM (7 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: add ARIA attributes to menu toggle. See #31527.

Location:
trunk/src/wp-content/themes/twentyfourteen
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/functions.php

    r31453 r31784  
    261261    }
    262262
    263     wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140616', true );
     263    wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150315', true );
    264264}
    265265add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
  • trunk/src/wp-content/themes/twentyfourteen/header.php

    r29842 r31784  
    5252                <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
    5353                <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
    54                 <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
     54                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
    5555            </nav>
    5656        </div>
  • trunk/src/wp-content/themes/twentyfourteen/js/functions.js

    r28758 r31784  
    88( function( $ ) {
    99    var body    = $( 'body' ),
    10         _window = $( window );
     10        _window = $( window ),
     11        nav, button, menu;
     12
     13    nav = $( '#primary-navigation' );
     14    button = nav.find( '.menu-toggle' );
     15    menu = nav.find( '.nav-menu' );
    1116
    1217    // Enable menu toggle for small screens.
    1318    ( function() {
    14         var nav = $( '#primary-navigation' ), button, menu;
    15         if ( ! nav ) {
    16             return;
    17         }
    18 
    19         button = nav.find( '.menu-toggle' );
    20         if ( ! button ) {
     19        if ( ! nav || ! button ) {
    2120            return;
    2221        }
    2322
    2423        // Hide button if menu is missing or empty.
    25         menu = nav.find( '.nav-menu' );
    2624        if ( ! menu || ! menu.children().length ) {
    2725            button.hide();
     
    2927        }
    3028
    31         $( '.menu-toggle' ).on( 'click.twentyfourteen', function() {
     29        button.on( 'click.twentyfourteen', function() {
    3230            nav.toggleClass( 'toggled-on' );
     31            if ( nav.hasClass( 'toggled-on' ) ) {
     32                $( this ).attr( 'aria-expanded', 'true' );
     33                menu.attr( 'aria-expanded', 'true' );
     34            } else {
     35                $( this ).attr( 'aria-expanded', 'false' );
     36                menu.attr( 'aria-expanded', 'false' );
     37            }
    3338        } );
    3439    } )();
     
    110115    } );
    111116
     117    // Add or remove ARIA attributes.
     118    function onResizeARIA() {
     119        if ( 781 > _window.width() ) {
     120            button.attr( 'aria-expanded', 'false' );
     121            menu.attr( 'aria-expanded', 'false' );
     122            button.attr( 'aria-controls', 'primary-menu' );
     123        } else {
     124            button.removeAttr( 'aria-expanded' );
     125            menu.removeAttr( 'aria-expanded' );
     126            button.removeAttr( 'aria-controls' );
     127        }
     128    }
     129
     130    _window
     131        .on( 'load.twentyfourteen', onResizeARIA )
     132        .on( 'resize.twentyfourteen', function() {
     133            onResizeARIA();
     134    } );
     135
    112136    _window.load( function() {
    113137        // Arrange footer widgets vertically.
Note: See TracChangeset for help on using the changeset viewer.