From 93734bcbcbbc821aab6eb19b126b79e3c404ce48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helen=20Hou-Sand=C3=AD?= Date: Sat, 3 Dec 2016 03:44:32 +0000 Subject: [PATCH] Twenty Seventeen: Improve ARIA for the nav menu. The `onResizeARIA()` function was not very useful and buggy. props afercia. fixes #39029, #39026 for the 4.7 branch. Built from https://develop.svn.wordpress.org/branches/4.7@39452 git-svn-id: http://core.svn.wordpress.org/branches/4.7@39392 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../twentyseventeen/assets/js/navigation.js | 47 +++++-------------- wp-includes/version.php | 2 +- 2 files changed, 12 insertions(+), 37 deletions(-) diff --git a/wp-content/themes/twentyseventeen/assets/js/navigation.js b/wp-content/themes/twentyseventeen/assets/js/navigation.js index da50e0fae1..f0fd65249a 100644 --- a/wp-content/themes/twentyseventeen/assets/js/navigation.js +++ b/wp-content/themes/twentyseventeen/assets/js/navigation.js @@ -17,8 +17,13 @@ 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' ); container.find( '.dropdown-toggle' ).click( function( e ) { @@ -50,15 +55,13 @@ return; } - // 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' ) ); }); })(); @@ -103,32 +106,4 @@ $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' ); }); })(); - - // 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 ); diff --git a/wp-includes/version.php b/wp-includes/version.php index cf194ced67..a05856ba0d 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '4.7-RC1-39448'; +$wp_version = '4.7-RC1-39452'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.