Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-31 21:48:36 +01:00
Code Issues Projects Releases Wiki Activity

Twenty Twenty: Fix aria-expanded handling in search toggle.

Browse Source 
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 ----------------------- */
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;
}
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 );
}
} );
}
/**

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

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

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

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @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.