Changeset 39451

Timestamp:

12/03/2016 03:40:13 AM (8 years ago)

Author:

helen

Message:

Twenty Seventeen: Improve ARIA for the nav menu.

The onResizeARIA() function was not very useful and buggy.

props afercia.
fixes #39029, #39026.

File:

• trunk/src/wp-content/themes/twentyseventeen/assets/js/navigation.js (modified) (3 diffs)

trunk/src/wp-content/themes/twentyseventeen/assets/js/navigation.js

@@ -18 +18 @@
         container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
 
-        // Toggle buttons and submenu items with active children menu items.
-        container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' );
+        // Set the active submenu dropdown toggle button initial state.
+        container.find( '.current-menu-ancestor > button' )
+            .addClass( 'toggled-on' )
+            .attr( 'aria-expanded', 'true' )
+            .find( '.screen-reader-text' )
+            .text( twentyseventeenScreenReaderText.collapse );
+        // Set the active submenu initial state.
         container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
 
@@ -51 +56 @@
         }
 
-        // Add an initial values for the attribute.
-        menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' );
+        // Add an initial value for the attribute.
+        menuToggle.attr( 'aria-expanded', 'false' );
 
         menuToggle.on( 'click.twentyseventeen', function() {
-            $( siteNavContain ).toggleClass( 'toggled-on' );
+            siteNavContain.toggleClass( 'toggled-on' );
 
-            $( this )
-                .add( siteNavigation )
-                .attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+            $( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
         });
     })();
@@ -104 +107 @@
         });
     })();
-
-    // Add the default ARIA attributes for the menu toggle and the navigations.
-    function onResizeARIA() {
-        if ( 'block' === $( '.menu-toggle' ).css( 'display' ) ) {
-
-            if ( menuToggle.hasClass( 'toggled-on' ) ) {
-                menuToggle.attr( 'aria-expanded', 'true' );
-            } else {
-                menuToggle.attr( 'aria-expanded', 'false' );
-            }
-
-            if ( siteNavigation.closest( '.main-navigation' ).hasClass( 'toggled-on' ) ) {
-                siteNavigation.attr( 'aria-expanded', 'true' );
-            } else {
-                siteNavigation.attr( 'aria-expanded', 'false' );
-            }
-        } else {
-            menuToggle.removeAttr( 'aria-expanded' );
-            siteNavigation.removeAttr( 'aria-expanded' );
-            menuToggle.removeAttr( 'aria-controls' );
-        }
-    }
-
-    $( document ).ready( function() {
-        $( window ).on( 'load.twentyseventeen', onResizeARIA );
-        $( window ).on( 'resize.twentyseventeen', onResizeARIA );
-    });
-
 })( jQuery );