Changeset 31785

Timestamp:

03/15/2015 08:00:57 PM (10 years ago)

Author:

lancewillett

Message:

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

Location:

trunk/src/wp-content/themes/twentythirteen

Files:

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

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

@@ -171 +171 @@
 
     // 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.

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

@@ -43 +43 @@
                     <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
                     <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>
-                    <?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' ) ); ?>
                     <?php get_search_form(); ?>
                 </nav><!-- #site-navigation -->

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

@@ -7 +7 @@
 ( function( $ ) {
     var body    = $( 'body' ),
-        _window = $( window );
+        _window = $( window ),
+        nav, button, menu;
+
+    nav = $( '#site-navigation' );
+    button = nav.find( '.menu-toggle' );
+    menu = nav.find( '.nav-menu' );
 
     /**
@@ -30 +35 @@
      */
     ( 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();
@@ -49 +47 @@
         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' );
+            }
         } );
 
@@ -69 +74 @@
         } );
     } )();
+
+    // 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();
+    } );
 
     /**