Ticket #53951: 53951.2.diff

src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -678 +678 @@
 /* Toggle an attribute ----------------------- */
 
 function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) {
+        var toggles;
+
         if ( element.classList.contains( 'close-search-toggle' ) ) {
                 return;
         }
@@ -687 +689 @@
         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.getAttribute( attribute ) !== trueVal ) {
+                        toggle.setAttribute( attribute, trueVal );
+                } else {
+                        toggle.setAttribute( attribute, falseVal );
+                }
+        } );
 }
 
 /**

src/wp-content/themes/twentytwenty/template-parts/modal-search.php

@@ -8 +8 @@
  */
 
 ?>
-<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">