Search Block: add button only with expandable input #50487
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| window.addEventListener( 'DOMContentLoaded', () => { | ||
|
There was a problem hiding this comment. I wonder if this could use the new interactivity API cc @gziolo There was a problem hiding this comment. Yes, it definitely could. We will run the experiment for Interactivity API until everything is properly tested so it's fine to have two concurrent solutions for 2-3 Gutenberg plugin releases 👍🏻 |
||
| const hiddenClass = 'wp-block-search__searchfield-hidden'; | ||
|
|
||
| Array.from( | ||
| document.getElementsByClassName( | ||
| 'wp-block-search__button-behavior-expand' | ||
| ) | ||
| ).forEach( ( block ) => { | ||
| const searchField = block.querySelector( '.wp-block-search__input' ); | ||
| const searchButton = block.querySelector( '.wp-block-search__button' ); | ||
| const activeElement = block.ownerDocument.activeElement; | ||
|
|
||
| const toggleSearchField = ( showSearchField ) => { | ||
| if ( showSearchField ) { | ||
| searchField.setAttribute( 'aria-hidden', 'false' ); | ||
| searchButton.setAttribute( 'aria-expanded', 'true' ); | ||
|
|
||
| return block.classList.remove( hiddenClass ); | ||
| } | ||
|
|
||
| searchField.setAttribute( 'aria-hidden', 'true' ); | ||
| searchButton.setAttribute( 'aria-expanded', 'false' ); | ||
| return block.classList.add( hiddenClass ); | ||
|
There was a problem hiding this comment. We could also toggle a few additional attributes for accessibility purposes here. When the search text input is hidden, we could add:
When the text input is visible:
I think this would help make the experience of using a mouse vs using a keyboard more consistent. There was a problem hiding this comment. Nice suggestions! I applied them here: 3a5c81a There was a problem hiding this comment. In the closed state, the button is responsible for displaying the search form. In the open state, the button is responsible for submitting the form. This is an important distinction, as we're changing the behavior of the button, and need to communicate that. So, I think we need to modify a couple of the properties in the open state:
When the search input is hidden, I agree with @mikachan that the search button should have a label to communicate that it will open the search form. Thanks for working on this @jffng! There was a problem hiding this comment. Thanks @jeryj — should we keep There was a problem hiding this comment. I applied this feedback in 919117f |
||
| }; | ||
|
|
||
| const hideSearchField = ( e ) => { | ||
| if ( | ||
| ! e.target.closest( '.wp-block-search__inside-wrapper' ) && | ||
| activeElement !== searchButton && | ||
| activeElement !== searchField | ||
| ) { | ||
| return toggleSearchField( false ); | ||
| } | ||
|
|
||
| if ( e.key === 'Escape' ) { | ||
| searchButton.focus(); | ||
| return toggleSearchField( false ); | ||
| } | ||
| }; | ||
|
|
||
| const handleButtonClick = ( e ) => { | ||
| if ( block.classList.contains( hiddenClass ) ) { | ||
| e.preventDefault(); | ||
| searchField.focus(); | ||
| toggleSearchField( true ); | ||
| } | ||
| }; | ||
|
|
||
| searchField.addEventListener( 'blur', hideSearchField ); | ||
jffng marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| searchField.addEventListener( 'keydown', ( e ) => { | ||
| hideSearchField( e ); | ||
| } ); | ||
| searchButton.addEventListener( 'click', handleButtonClick ); | ||
| document.body.addEventListener( 'click', hideSearchField ); | ||
| } ); | ||
| } ); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice to do this using the
WP_HTML_Tag_Processor. There's an example of this in https://github.com/WordPress/gutenberg/pull/49212/files. Not necessary to get his merged, but a nice improvement.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice, happy to try that in a follow up.