Admin search: update close button behaviour (#38204)

* Admin search: update close button behaviour * Remove projects/plugins/jetpack/_inc/client/components/search/index.jsx from eslint-excludelist.json --------- Co-authored-by: Karen Attfield <[email protected]>
Automattic · Jul 5, 2024 · fb3c2bd · fb3c2bd
1 parent 709dd1d
commit fb3c2bd
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 37 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/components/search/clear-btn.jsx b/projects/plugins/jetpack/_inc/client/components/search/clear-btn.jsx
@@ -0,0 +1,15 @@
+import { __ } from '@wordpress/i18n';
+
+const SearchClearButton = ( { onClick } ) => {
+	return (
+		<button
+			className="dops-search__clear-btn"
+			onClick={ onClick }
+			aria-label={ __( 'Clear search', 'jetpack' ) }
+		>
+			{ __( 'Clear', 'jetpack' ) }
+		</button>
+	);
+};
+
+export default SearchClearButton;
diff --git a/projects/plugins/jetpack/_inc/client/components/search/close-btn.jsx b/projects/plugins/jetpack/_inc/client/components/search/close-btn.jsx
@@ -0,0 +1,19 @@
+import Gridicon from 'components/gridicon';
+
+const SearchCloseButton = ( { instanceId, closeSearch, closeListener } ) => {
+	return (
+		<div
+			role="button"
+			className="dops-search__icon-navigation"
+			onClick={ closeSearch }
+			tabIndex="0"
+			onKeyDown={ closeListener }
+			aria-controls={ 'dops-search-component-' + instanceId }
+			aria-label="Close Search"
+		>
+			<Gridicon icon="cross" className="dops-search__close-icon" />
+		</div>
+	);
+};
+
+export default SearchCloseButton;
diff --git a/projects/plugins/jetpack/_inc/client/components/search/index.jsx b/projects/plugins/jetpack/_inc/client/components/search/index.jsx
@@ -5,6 +5,8 @@ import analytics from 'lib/analytics';
 import { debounce, noop } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
+import SearchClearButton from './clear-btn';
+import SearchCloseButton from './close-btn';
 
 import './style.scss';
 
@@ -13,6 +15,12 @@ import './style.scss';
  */
 const SEARCH_DEBOUNCE_MS = 300;
 
+/**
+ * Listener for key events
+ *
+ * @param {Function} methodToCall - Method to call
+ * @param {Event} event	- Event
+ */
 function keyListener( methodToCall, event ) {
 	switch ( event.key ) {
 		case ' ':
@@ -36,7 +44,6 @@ class Search extends React.Component {
 		onSearch: PropTypes.func.isRequired,
 		onSearchChange: PropTypes.func,
 		onSearchOpen: PropTypes.func,
-		onSearchClose: PropTypes.func,
 		analyticsGroup: PropTypes.string,
 		overlayStyling: PropTypes.func,
 		autoFocus: PropTypes.bool,
@@ -61,7 +68,6 @@ class Search extends React.Component {
 		disabled: false,
 		onSearchChange: noop,
 		onSearchOpen: noop,
-		onSearchClose: noop,
 		onKeyDown: noop,
 		onClick: noop,
 		//undefined value for overlayStyling is an optimization that will
@@ -104,10 +110,6 @@ class Search extends React.Component {
 				: this.props.onSearch;
 		}
 
-		if ( nextProps.isOpen ) {
-			this.setState( { isOpen: nextProps.isOpen } );
-		}
-
 		if (
 			nextProps.initialValue !== this.props.initialValue &&
 			( this.state.keyword === this.props.initialValue || this.state.keyword === '' )
@@ -237,25 +239,23 @@ class Search extends React.Component {
 			return;
 		}
 
-		const input = this.searchInputRef.current;
-
 		this.setState( {
 			keyword: '',
-			isOpen: this.props.isOpen || false,
+			isOpen: false,
 		} );
 
-		input.value = ''; // will not trigger onChange
-		input.blur();
-
 		if ( this.props.pinned ) {
 			this.openIconRef.current.focus();
 		}
 
-		this.props.onSearchClose( event );
-
 		analytics.ga.recordEvent( this.props.analyticsGroup, 'Clicked Close Search' );
 	};
 
+	clearSearch = () => {
+		this.clear();
+		this.focus();
+	};
+
 	keyUp = event => {
 		if ( event.key === 'Enter' && isMobile() ) {
 			//dismiss soft keyboards
@@ -320,6 +320,8 @@ class Search extends React.Component {
 
 		const fadeDivClass = clsx( 'dops-search__input-fade', this.props.dir );
 		const inputClass = clsx( 'dops-search__input', this.props.dir );
+		const showCloseButton = ! this.props.hideClose && ( this.state.keyword || this.state.isOpen );
+		const showClearButton = showCloseButton && searchValue;
 
 		return (
 			<div dir={ this.props.dir || null } className={ searchClass } role="search">
@@ -343,6 +345,7 @@ class Search extends React.Component {
 						className={ inputClass }
 						placeholder={ placeholder }
 						role="searchbox"
+						tabIndex={ isOpenUnpinnedOrQueried ? '0' : '-1' }
 						value={ searchValue }
 						ref={ this.searchInputRef }
 						onKeyUp={ this.keyUp }
@@ -359,7 +362,14 @@ class Search extends React.Component {
 					/>
 					{ this.props.overlayStyling && this.renderStylingDiv() }
 				</div>
-				{ this.closeButton() }
+				{ showClearButton && <SearchClearButton onClick={ this.clearSearch } /> }
+				{ showCloseButton && (
+					<SearchCloseButton
+						closeSearch={ this.closeSearch }
+						closeListener={ this.closeListener }
+						instanceId={ this.state.instanceId }
+					/>
+				) }
 			</div>
 		);
 	}
@@ -371,26 +381,6 @@ class Search extends React.Component {
 			</div>
 		);
 	};
-
-	closeButton = () => {
-		if ( ! this.props.hideClose && ( this.state.keyword || this.state.isOpen ) ) {
-			return (
-				<div
-					role="button"
-					className="dops-search__icon-navigation"
-					onClick={ this.closeSearch }
-					tabIndex="0"
-					onKeyDown={ this.closeListener }
-					aria-controls={ 'dops-search-component-' + this.state.instanceId }
-					aria-label="Close Search"
-				>
-					<Gridicon icon="cross" className="dops-search__close-icon" />
-				</div>
-			);
-		}
-
-		return null;
-	};
 }
 
 export default Search;
diff --git a/projects/plugins/jetpack/_inc/client/components/search/style.scss b/projects/plugins/jetpack/_inc/client/components/search/style.scss
@@ -27,6 +27,31 @@
 		background-color: $white;
 		border-radius: inherit;
 		height: 100%;
+
+		&:focus-visible {
+			outline-offset: -2px;
+		}	
+	}
+
+	.dops-search__clear-btn {
+		min-width: 48px;
+		padding: 0.25em;
+
+		background: none;
+		border: solid 1px currentColor;
+		border-radius: 4px;
+		color: var(--jp-gray-50);
+
+		&:focus-visible {
+			outline-offset: 2px;
+		}
+	}
+
+	.dops-search__icon-navigation,
+	.dops-search__clear-btn {
+		&:focus-visible {
+			outline: solid 2px var(--jp-green-50);
+		}
 	}
 
 	.dops-search__open-icon,
@@ -68,7 +93,9 @@
 	top: 0;
 	right: 0;
 	overflow: hidden;
-
+	gap: 0.25rem;	
+	background-color: var(--jp-white);
+
 	.dops-search__input-fade {
 		position: relative;
 		flex: 1 1 auto;

diff --git a/projects/plugins/jetpack/changelog/fix-jetpack-search-clear-btn b/projects/plugins/jetpack/changelog/fix-jetpack-search-clear-btn
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Update search close button behaviour
diff --git a/tools/eslint-excludelist.json b/tools/eslint-excludelist.json
@@ -10,7 +10,6 @@
 	"projects/plugins/jetpack/_inc/client/components/popover/index.jsx",
 	"projects/plugins/jetpack/_inc/client/components/popover/util.js",
 	"projects/plugins/jetpack/_inc/client/components/root-child/index.jsx",
-	"projects/plugins/jetpack/_inc/client/components/search/index.jsx",
 	"projects/plugins/jetpack/_inc/client/components/section-nav/index.jsx",
 	"projects/plugins/jetpack/_inc/client/components/section-nav/item.jsx",
 	"projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx",