WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
joedolson 2022-04-01 17:56:08 +00:00
parent 35ce94f930
commit 7b96116f3f
4 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
wp-content/themes/twentytwenty/assets/js/index.js
View File

@ -678,20 +678,36 @@ twentytwentyDomReady( function() {
/* Toggle an attribute ----------------------- */ /* Toggle an attribute ----------------------- */
function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) { function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) {
if ( element.classList.contains( 'close-search-toggle' ) ) { var toggles;
if ( ! element.hasAttribute( attribute ) ) {
return; return;
} }
if ( trueVal === undefined ) { if ( trueVal === undefined ) {
trueVal = true; trueVal = true;
} }
if ( falseVal === undefined ) { if ( falseVal === undefined ) {
falseVal = false; falseVal = false;
} }
if ( element.getAttribute( attribute ) !== trueVal ) {
element.setAttribute( attribute, trueVal ); /*
} else { * Take into account multiple toggle elements that need their state to be
element.setAttribute( attribute, falseVal ); * 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 );
}
} );
} }
/** /**

2
wp-content/themes/twentytwenty/template-parts/modal-menu.php
View File

@ -17,7 +17,7 @@
<div class="menu-top"> <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> <span class="toggle-text"><?php _e( 'Close Menu', 'twentytwenty' ); ?></span>
<?php twentytwenty_the_theme_svg( 'cross' ); ?> <?php twentytwenty_the_theme_svg( 'cross' ); ?>
</button><!-- .nav-toggle --> </button><!-- .nav-toggle -->

2
wp-content/themes/twentytwenty/template-parts/modal-search.php
View File

@ -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"> <div class="search-modal-inner modal-inner">

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.