Make WordPress Core

Changeset 31785


Ignore:
Timestamp:
03/15/2015 08:00:57 PM (9 years ago)
Author:
lancewillett
Message:

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

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

Legend:

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

    r31453 r31785  
    171171
    172172    // Loads JavaScript file with functionality specific to Twenty Thirteen.
    173     wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2014-06-08', true );
     173    wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150315', true );
    174174
    175175    // Add Source Sans Pro and Bitter fonts, used in the main stylesheet.
  • trunk/src/wp-content/themes/twentythirteen/header.php

    r29181 r31785  
    4343                    <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
    4444                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
    45                     <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
     45                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
    4646                    <?php get_search_form(); ?>
    4747                </nav><!-- #site-navigation -->
  • trunk/src/wp-content/themes/twentythirteen/js/functions.js

    r28699 r31785  
    77( function( $ ) {
    88    var body    = $( 'body' ),
    9         _window = $( window );
     9        _window = $( window ),
     10        nav, button, menu;
     11
     12    nav = $( '#site-navigation' );
     13    button = nav.find( '.menu-toggle' );
     14    menu = nav.find( '.nav-menu' );
    1015
    1116    /**
     
    3035     */
    3136    ( function() {
    32         var nav = $( '#site-navigation' ), button, menu;
    33         if ( ! nav ) {
    34             return;
    35         }
    36 
    37         button = nav.find( '.menu-toggle' );
    38         if ( ! button ) {
     37        if ( ! nav || ! button ) {
    3938            return;
    4039        }
    4140
    4241        // Hide button if menu is missing or empty.
    43         menu = nav.find( '.nav-menu' );
    4442        if ( ! menu || ! menu.children().length ) {
    4543            button.hide();
     
    4947        button.on( 'click.twentythirteen', function() {
    5048            nav.toggleClass( 'toggled-on' );
     49            if ( nav.hasClass( 'toggled-on' ) ) {
     50                $( this ).attr( 'aria-expanded', 'true' );
     51                menu.attr( 'aria-expanded', 'true' );
     52            } else {
     53                $( this ).attr( 'aria-expanded', 'false' );
     54                menu.attr( 'aria-expanded', 'false' );
     55            }
    5156        } );
    5257
     
    6974        } );
    7075    } )();
     76
     77    // Add or remove ARIA attributes.
     78    function onResizeARIA() {
     79        if ( 643 > _window.width() ) {
     80            button.attr( 'aria-expanded', 'false' );
     81            menu.attr( 'aria-expanded', 'false' );
     82            button.attr( 'aria-controls', 'primary-menu' );
     83        } else {
     84            button.removeAttr( 'aria-expanded' );
     85            menu.removeAttr( 'aria-expanded' );
     86            button.removeAttr( 'aria-controls' );
     87        }
     88    }
     89
     90    _window
     91        .on( 'load.twentythirteen', onResizeARIA )
     92        .on( 'resize.twentythirteen', function() {
     93            onResizeARIA();
     94    } );
    7195
    7296    /**
Note: See TracChangeset for help on using the changeset viewer.