Twenty Twenty: Fix aria-expanded handling in search toggle.

joedolson · joedolson · commit bc0b296237a1 · 2022-04-01T17:54:30.000Z
Transform search into a dialog role and fix the handling of aria-expanded to synchronize mobile and desktop buttons. Props utz119, alexstine, mukesh27, hareesh-pillai, sabernhardt, audrasjb, afercia. Fixes #53951. git-svn-id: https://develop.svn.wordpress.org/trunk@53051 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-content/themes/twentytwenty/assets/js/index.js b/src/wp-content/themes/twentytwenty/assets/js/index.js
@@ -678,20 +678,36 @@ twentytwentyDomReady( function() {
 /* Toggle an attribute ----------------------- */
 
 function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) {
-	if ( element.classList.contains( 'close-search-toggle' ) ) {
+	var toggles;
+
+	if ( ! element.hasAttribute( attribute ) ) {
 		return;
 	}
+
 	if ( trueVal === undefined ) {
 		trueVal = true;
 	}
 	if ( falseVal === undefined ) {
 		falseVal = false;
 	}
-	if ( element.getAttribute( attribute ) !== trueVal ) {
-		element.setAttribute( attribute, trueVal );
-	} else {
-		element.setAttribute( attribute, falseVal );
-	}
+
+	/*
+	 * Take into account multiple toggle elements that need their state to be
+	 * synced. For example: the Search toggle buttons for desktop and mobile.
+	 */
+	toggles = document.querySelectorAll( '[data-toggle-target="' + element.dataset.toggleTarget + '"]' );
+
+	toggles.forEach( function( toggle ) {
+		if ( ! toggle.hasAttribute( attribute ) ) {
+			return;
+		}
+
+		if ( toggle.getAttribute( attribute ) !== trueVal ) {
+			toggle.setAttribute( attribute, trueVal );
+		} else {
+			toggle.setAttribute( attribute, falseVal );
+		}
+	} );
 }
 
 /**
diff --git a/src/wp-content/themes/twentytwenty/template-parts/modal-menu.php b/src/wp-content/themes/twentytwenty/template-parts/modal-menu.php
@@ -17,7 +17,7 @@
 
 			<div class="menu-top">
 
-				<button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".menu-modal">
+				<button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" data-set-focus=".menu-modal">
 					<span class="toggle-text"><?php _e( 'Close Menu', 'twentytwenty' ); ?></span>
 					<?php twentytwenty_the_theme_svg( 'cross' ); ?>
 				</button><!-- .nav-toggle -->
diff --git a/src/wp-content/themes/twentytwenty/template-parts/modal-search.php b/src/wp-content/themes/twentytwenty/template-parts/modal-search.php
@@ -8,7 +8,7 @@
  */
 
 ?>
-<div class="search-modal cover-modal header-footer-group" data-modal-target-string=".search-modal">
+<div class="search-modal cover-modal header-footer-group" data-modal-target-string=".search-modal" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e( 'Search', 'twentytwenty' ); ?>">
 
 	<div class="search-modal-inner modal-inner">
 
