Make WordPress Core

Changeset 53051


Ignore:
Timestamp:
04/01/2022 05:54:30 PM (3 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentytwenty/assets/js/index.js

    r51322 r53051  
    679679
    680680function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) {
    681     if ( element.classList.contains( 'close-search-toggle' ) ) {
     681    var toggles;
     682
     683    if ( ! element.hasAttribute( attribute ) ) {
    682684        return;
    683685    }
     686
    684687    if ( trueVal === undefined ) {
    685688        trueVal = true;
     
    688691        falseVal = false;
    689692    }
    690     if ( element.getAttribute( attribute ) !== trueVal ) {
    691         element.setAttribute( attribute, trueVal );
    692     } else {
    693         element.setAttribute( attribute, falseVal );
    694     }
     693
     694    /*
     695     * Take into account multiple toggle elements that need their state to be
     696     * synced. For example: the Search toggle buttons for desktop and mobile.
     697     */
     698    toggles = document.querySelectorAll( '[data-toggle-target="' + element.dataset.toggleTarget + '"]' );
     699
     700    toggles.forEach( function( toggle ) {
     701        if ( ! toggle.hasAttribute( attribute ) ) {
     702            return;
     703        }
     704
     705        if ( toggle.getAttribute( attribute ) !== trueVal ) {
     706            toggle.setAttribute( attribute, trueVal );
     707        } else {
     708            toggle.setAttribute( attribute, falseVal );
     709        }
     710    } );
    695711}
    696712
  • trunk/src/wp-content/themes/twentytwenty/template-parts/modal-menu.php

    r51967 r53051  
    1818            <div class="menu-top">
    1919
    20                 <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">
     20                <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">
    2121                    <span class="toggle-text"><?php _e( 'Close Menu', 'twentytwenty' ); ?></span>
    2222                    <?php twentytwenty_the_theme_svg( 'cross' ); ?>
  • trunk/src/wp-content/themes/twentytwenty/template-parts/modal-search.php

    r50933 r53051  
    99
    1010?>
    11 <div class="search-modal cover-modal header-footer-group" data-modal-target-string=".search-modal">
     11<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' ); ?>">
    1212
    1313    <div class="search-modal-inner modal-inner">
Note: See TracChangeset for help on using the changeset viewer.