Changeset 31784

Timestamp:

03/15/2015 07:59:53 PM (12 years ago)

Author:

lancewillett

Message:

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

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• functions.php (modified) (1 diff)
• header.php (modified) (1 diff)
• js/functions.js (modified) (3 diffs)

trunk/src/wp-content/themes/twentyfourteen/functions.php

@@ -261 +261 @@
         }
 
-        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' );

trunk/src/wp-content/themes/twentyfourteen/header.php

@@ -52 +52 @@
                                 <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
                                 <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
-                                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
+                                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
                         </nav>
                 </div>

trunk/src/wp-content/themes/twentyfourteen/js/functions.js

@@ -8 +8 @@
 ( 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();
@@ -29 +27 @@
                 }
 
-                $( '.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' );
+                        }
                 } );
         } )();
@@ -110 +115 @@
         } );
 
+        // 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.