Changeset 31644

Timestamp:

03/06/2015 05:33:38 PM (10 years ago)

Author:

lancewillett

Message:

Twenty Fifteen: add ARIA attributes to menu toggle.

See #31527, props davidakennedy, lance.

File:

• trunk/src/wp-content/themes/twentyfifteen/js/functions.js (modified) (4 diffs)

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

@@ -9 +9 @@
     var $body, $window, $sidebar, adminbarOffset, top = false,
         bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
-        topOffset = 0, bodyHeight, sidebarHeight, resizeTimer;
+        topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
+        secondary, button;
 
     // Add dropdown toggle that display child menu items.
@@ -27 +28 @@
     } );
 
+    secondary = $( '#secondary' );
+    button = $( '.site-branding' ).find( '.secondary-toggle' );
+
     // Enable menu toggle for small screens.
     ( function() {
-        var secondary = $( '#secondary' ), button, menu, widgets, social;
-        if ( ! secondary ) {
-            return;
-        }
-
-        button = $( '.site-branding' ).find( '.secondary-toggle' );
-        if ( ! button ) {
+        var menu, widgets, social;
+        if ( ! secondary || ! button ) {
             return;
         }
@@ -52 +51 @@
             secondary.trigger( 'resize' );
             $( this ).toggleClass( 'toggled-on' );
+            if ( $( this, secondary ).hasClass( 'toggled-on' ) ) {
+                $( this ).attr( 'aria-expanded', 'true' );
+                secondary.attr( 'aria-expanded', 'true' );
+            } else {
+                $( this ).attr( 'aria-expanded', 'false' );
+                secondary.attr( 'aria-expanded', 'false' );
+            }
         } );
     } )();
+
+    // Add or remove ARIA attributes.
+    function onResizeARIA() {
+        if ( 955 > $window.width() ) {
+            button.attr( 'aria-expanded', 'false' );
+            secondary.attr( 'aria-expanded', 'false' );
+            button.attr( 'aria-controls', 'secondary' );
+        } else {
+            button.removeAttr( 'aria-expanded' );
+            secondary.removeAttr( 'aria-expanded' );
+            button.removeAttr( 'aria-controls' );
+        }
+    }
 
     // Sidebar scrolling.
@@ -120 +139 @@
         $window
             .on( 'scroll.twentyfifteen', scroll )
+            .on( 'load.twentyfifteen', onResizeARIA )
             .on( 'resize.twentyfifteen', function() {
                 clearTimeout( resizeTimer );
                 resizeTimer = setTimeout( resizeAndScroll, 500 );
+                onResizeARIA();
             } );
-        $sidebar.on( 'click keydown', 'button', resizeAndScroll );
+        $sidebar.on( 'click.twentyfifteen keydown.twentyfifteen', 'button', resizeAndScroll );
 
         resizeAndScroll();