Match visible label of search inputs with their actual label. (WordPr…

…ess#65458) * Match visible label of search inputs with their actual label. * Adjust more tests. * Adjust more tests. Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
karthick-murugan · Nov 13, 2024 · a547a00 · a547a00
1 parent 7fff8a4
commit a547a00
Show file tree

Hide file tree

Showing 29 changed files with 136 additions and 119 deletions.
diff --git a/.../block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js b/.../block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
@@ -40,7 +40,7 @@ function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
 				__nextHasNoMarginBottom
 				onChange={ setSearchValue }
 				value={ searchValue }
-				label={ __( 'Search for patterns' ) }
+				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
 		</div>

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -168,7 +168,7 @@ function InserterMenu(
 						setFilterValue( value );
 					} }
 					value={ filterValue }
-					label={ __( 'Search for blocks and patterns' ) }
+					label={ __( 'Search' ) }
 					placeholder={ __( 'Search' ) }
 				/>
 				{ !! delayedFilterValue && (

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

diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -58,7 +57,6 @@ const LinkControlSearchInput = forwardRef(
 			? fetchSuggestions || genericSearchHandler
 			: noopSearchHandler;
 
-		const instanceId = useInstanceId( LinkControlSearchInput );
 		const [ focusedSuggestion, setFocusedSuggestion ] = useState();
 
 		/**
@@ -76,7 +74,6 @@ const LinkControlSearchInput = forwardRef(
 		const handleRenderSuggestions = ( props ) =>
 			renderSuggestions( {
 				...props,
-				instanceId,
 				withCreateSuggestion,
 				createSuggestionButtonText,
 				suggestionsQuery,
@@ -116,16 +113,18 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
+		const inputLabel = placeholder ?? __( 'Search or type URL' );
+
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					label={ __( 'Link' ) }
+					label={ inputLabel }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type URL' ) }
+					placeholder={ inputLabel }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}

diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden, MenuGroup } from '@wordpress/components';
+import { MenuGroup } from '@wordpress/components';
 
 /**
  * External dependencies
@@ -17,7 +17,6 @@ import LinkControlSearchItem from './search-item';
 import { CREATE_TYPE, LINK_ENTRY_TYPES } from './constants';
 
 export default function LinkControlSearchResults( {
-	instanceId,
 	withCreateSuggestion,
 	currentInputValue,
 	handleSuggestionClick,
@@ -47,30 +46,20 @@ export default function LinkControlSearchResults( {
 	// If the query has a specified type, then we can skip showing them in the result. See #24839.
 	const shouldShowSuggestionsTypes = ! suggestionsQuery?.type;
 
-	// According to guidelines aria-label should be added if the label
-	// itself is not visible.
-	// See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
-	const searchResultsLabelId = `block-editor-link-control-search-results-label-${ instanceId }`;
 	const labelText = isInitialSuggestions
 		? __( 'Suggestions' )
 		: sprintf(
 				/* translators: %s: search term. */
 				__( 'Search results for "%s"' ),
 				currentInputValue
 		  );
-	const searchResultsLabel = (
-		<VisuallyHidden id={ searchResultsLabelId }>
-			{ labelText }
-		</VisuallyHidden>
-	);
 
 	return (
 		<div className="block-editor-link-control__search-results-wrapper">
-			{ searchResultsLabel }
 			<div
 				{ ...suggestionsListProps }
 				className={ resultsListClasses }
-				aria-labelledby={ searchResultsLabelId }
+				aria-label={ labelText }
 			>
 				<MenuGroup>
 					{ suggestions.map( ( suggestion, index ) => {