From 7b96116f3fb6938a33f157d53e69cdcdec242694 Mon Sep 17 00:00:00 2001
From: joedolson <joedolson@git.wordpress.org>
Date: Fri, 1 Apr 2022 17:56:08 +0000
Subject: [PATCH] Twenty Twenty: Fix aria-expanded handling in search toggle.

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.

Built from https://develop.svn.wordpress.org/trunk@53051


git-svn-id: http://core.svn.wordpress.org/trunk@52640 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../themes/twentytwenty/assets/js/index.js    | 28 +++++++++++++++----
 .../template-parts/modal-menu.php             |  2 +-
 .../template-parts/modal-search.php           |  2 +-
 wp-includes/version.php                       |  2 +-
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/wp-content/themes/twentytwenty/assets/js/index.js b/wp-content/themes/twentytwenty/assets/js/index.js
index 0a64fd98ba..5daa9eaa7c 100644
--- a/wp-content/themes/twentytwenty/assets/js/index.js
+++ b/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/wp-content/themes/twentytwenty/template-parts/modal-menu.php b/wp-content/themes/twentytwenty/template-parts/modal-menu.php
index bd6b08889e..f157f5159b 100644
--- a/wp-content/themes/twentytwenty/template-parts/modal-menu.php
+++ b/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/wp-content/themes/twentytwenty/template-parts/modal-search.php b/wp-content/themes/twentytwenty/template-parts/modal-search.php
index 32f9b51a0c..cf8d4dc6a7 100644
--- a/wp-content/themes/twentytwenty/template-parts/modal-search.php
+++ b/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">
 
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 95c7e8b30e..aef962e422 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.0-alpha-53050';
+$wp_version = '6.0-alpha-53051';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.