Improve block search input's accessible name and placeholder (#28393)

WordPress · Feb 16, 2021 · 0bbc916 · 0bbc916
1 parent 582a750
commit 0bbc916
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -179,6 +179,7 @@ function InserterMenu( {
 							setFilterValue( value );
 						} }
 						value={ filterValue }
+						label={ __( 'Search for blocks and patterns' ) }
 						placeholder={ __( 'Search' ) }
 					/>
 					{ !! filterValue && (

diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -92,7 +92,8 @@ export default function QuickInserter( {
 					onChange={ ( value ) => {
 						setFilterValue( value );
 					} }
-					placeholder={ __( 'Search for a block' ) }
+					label={ __( 'Search for blocks and patterns' ) }
+					placeholder={ __( 'Search' ) }
 				/>
 			) }
 

diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js
@@ -12,7 +12,13 @@ import { VisuallyHidden, Button } from '@wordpress/components';
 import { Icon, search, closeSmall } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
-function InserterSearchForm( { className, onChange, value, placeholder } ) {
+function InserterSearchForm( {
+	className,
+	onChange,
+	value,
+	label,
+	placeholder,
+} ) {
 	const instanceId = useInstanceId( InserterSearchForm );
 	const searchInput = useRef();
 
@@ -27,7 +33,7 @@ function InserterSearchForm( { className, onChange, value, placeholder } ) {
 				as="label"
 				htmlFor={ `block-editor-inserter__search-${ instanceId }` }
 			>
-				{ placeholder }
+				{ label || placeholder }
 			</VisuallyHidden>
 			<input
 				ref={ searchInput }

diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -253,7 +253,7 @@ describe( 'Widgets screen', () => {
 
 		// TODO: The query should be rewritten with role and label.
 		const inserterSearchBox = await page.waitForSelector(
-			'input[type="search"][placeholder="Search for a block"]'
+			'input[type="search"][placeholder="Search"]'
 		);
 		expect(
 			await inserterSearchBox.evaluate(