Changeset 53051

Timestamp:

04/01/2022 05:54:30 PM (4 years ago)

Author:

joedolson

Message:

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.

Location:

trunk/src/wp-content/themes/twentytwenty

Files:

• assets/js/index.js (modified) (2 diffs)
• template-parts/modal-menu.php (modified) (1 diff)
• template-parts/modal-search.php (modified) (1 diff)

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

@@ -679 +679 @@
 
 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;
@@ -688 +691 @@
                 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 );
+                }
+        } );
 }
 

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

@@ -18 +18 @@
                         <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' ); ?>

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

@@ -9 +9 @@
 
 ?>
-<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">