From b69fe9bd6ab373df8043adf81b4338d7367ea134 Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Sun, 15 Mar 2015 20:00:57 +0000 Subject: [PATCH] Twenty Thirteen: add ARIA attributes to menu toggle. See #31527. git-svn-id: https://develop.svn.wordpress.org/trunk@31785 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentythirteen/functions.php | 2 +- .../themes/twentythirteen/header.php | 2 +- .../themes/twentythirteen/js/functions.js | 42 +++++++++++++++---- 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/src/wp-content/themes/twentythirteen/functions.php b/src/wp-content/themes/twentythirteen/functions.php index e845668f4b..6b001941c5 100644 --- a/src/wp-content/themes/twentythirteen/functions.php +++ b/src/wp-content/themes/twentythirteen/functions.php @@ -170,7 +170,7 @@ function twentythirteen_scripts_styles() { wp_enqueue_script( 'jquery-masonry' ); // Loads JavaScript file with functionality specific to Twenty Thirteen. - wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2014-06-08', true ); + wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150315', true ); // Add Source Sans Pro and Bitter fonts, used in the main stylesheet. wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null ); diff --git a/src/wp-content/themes/twentythirteen/header.php b/src/wp-content/themes/twentythirteen/header.php index f61c28f0f8..094f74cc9f 100644 --- a/src/wp-content/themes/twentythirteen/header.php +++ b/src/wp-content/themes/twentythirteen/header.php @@ -42,7 +42,7 @@ diff --git a/src/wp-content/themes/twentythirteen/js/functions.js b/src/wp-content/themes/twentythirteen/js/functions.js index 526c15d6b3..522457bf80 100644 --- a/src/wp-content/themes/twentythirteen/js/functions.js +++ b/src/wp-content/themes/twentythirteen/js/functions.js @@ -6,7 +6,12 @@ ( function( $ ) { var body = $( 'body' ), - _window = $( window ); + _window = $( window ), + nav, button, menu; + + nav = $( '#site-navigation' ); + button = nav.find( '.menu-toggle' ); + menu = nav.find( '.nav-menu' ); /** * Adds a top margin to the footer if the sidebar widget area is higher @@ -29,18 +34,11 @@ * Enables menu toggle for small screens. */ ( function() { - var nav = $( '#site-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; @@ -48,6 +46,13 @@ button.on( 'click.twentythirteen', 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' ); + } } ); // Fix sub-menus for touch devices. @@ -69,6 +74,25 @@ } ); } )(); + // Add or remove ARIA attributes. + function onResizeARIA() { + if ( 643 > _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.twentythirteen', onResizeARIA ) + .on( 'resize.twentythirteen', function() { + onResizeARIA(); + } ); + /** * Makes "skip to content" link work correctly in IE9 and Chrome for better * accessibility.