Ticket #53951: 53951.4.diff

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

@@ -678 +678 @@
 /* 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;
         }
@@ -687 +690 @@
         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 );
+                }
+        } );
 }
 
 /**

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

@@ -17 +17 @@
 
                         <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 -->

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">