From f81f253434a6fa037fe553d0f713d3b59c6f05c8 Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Sun, 15 Mar 2015 20:00:27 +0000 Subject: [PATCH] Twenty Fourteen: add ARIA attributes to menu toggle. See #31527. Built from https://develop.svn.wordpress.org/trunk@31784 git-svn-id: http://core.svn.wordpress.org/trunk@31764 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentyfourteen/functions.php | 2 +- wp-content/themes/twentyfourteen/header.php | 2 +- .../themes/twentyfourteen/js/functions.js | 44 ++++++++++++++----- wp-includes/version.php | 2 +- 4 files changed, 37 insertions(+), 13 deletions(-) diff --git a/wp-content/themes/twentyfourteen/functions.php b/wp-content/themes/twentyfourteen/functions.php index 3c8ebc7c77..bb23a2566b 100644 --- a/wp-content/themes/twentyfourteen/functions.php +++ b/wp-content/themes/twentyfourteen/functions.php @@ -260,7 +260,7 @@ function twentyfourteen_scripts() { ) ); } - wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140616', true ); + wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150315', true ); } add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' ); diff --git a/wp-content/themes/twentyfourteen/header.php b/wp-content/themes/twentyfourteen/header.php index 139e207faf..5343158da7 100644 --- a/wp-content/themes/twentyfourteen/header.php +++ b/wp-content/themes/twentyfourteen/header.php @@ -51,7 +51,7 @@ diff --git a/wp-content/themes/twentyfourteen/js/functions.js b/wp-content/themes/twentyfourteen/js/functions.js index 7eddd83ef3..21da9a681a 100644 --- a/wp-content/themes/twentyfourteen/js/functions.js +++ b/wp-content/themes/twentyfourteen/js/functions.js @@ -7,29 +7,34 @@ */ ( function( $ ) { var body = $( 'body' ), - _window = $( window ); + _window = $( window ), + nav, button, menu; + + nav = $( '#primary-navigation' ); + button = nav.find( '.menu-toggle' ); + menu = nav.find( '.nav-menu' ); // Enable menu toggle for small screens. ( function() { - var nav = $( '#primary-navigation' ), button, menu; - if ( ! nav ) { - return; - } - - button = nav.find( '.menu-toggle' ); - if ( ! button ) { + if ( ! nav || ! button ) { return; } // Hide button if menu is missing or empty. - menu = nav.find( '.nav-menu' ); if ( ! menu || ! menu.children().length ) { button.hide(); return; } - $( '.menu-toggle' ).on( 'click.twentyfourteen', function() { + button.on( 'click.twentyfourteen', function() { nav.toggleClass( 'toggled-on' ); + if ( nav.hasClass( 'toggled-on' ) ) { + $( this ).attr( 'aria-expanded', 'true' ); + menu.attr( 'aria-expanded', 'true' ); + } else { + $( this ).attr( 'aria-expanded', 'false' ); + menu.attr( 'aria-expanded', 'false' ); + } } ); } )(); @@ -109,6 +114,25 @@ } ); } ); + // Add or remove ARIA attributes. + function onResizeARIA() { + if ( 781 > _window.width() ) { + button.attr( 'aria-expanded', 'false' ); + menu.attr( 'aria-expanded', 'false' ); + button.attr( 'aria-controls', 'primary-menu' ); + } else { + button.removeAttr( 'aria-expanded' ); + menu.removeAttr( 'aria-expanded' ); + button.removeAttr( 'aria-controls' ); + } + } + + _window + .on( 'load.twentyfourteen', onResizeARIA ) + .on( 'resize.twentyfourteen', function() { + onResizeARIA(); + } ); + _window.load( function() { // Arrange footer widgets vertically. if ( $.isFunction( $.fn.masonry ) ) { diff --git a/wp-includes/version.php b/wp-includes/version.php index 4c20d02457..184bbf7fab 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '4.2-beta1-31783'; +$wp_version = '4.2-beta1-31784'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.