Visually hide the LinkControl initial/results heading (#50977)

* Use VisuallyHidden for the heading * Remove unnecessary styles * Use "Suggestions" instead of "Links" * Update Recently updated title to match Suggestions title in unit tests --------- Co-authored-by: Jerry Jones <[email protected]>
WordPress · May 31, 2023 · 1f490c5 · 1f490c5
1 parent db462d4
commit 1f490c5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js
@@ -8,7 +8,6 @@ import { VisuallyHidden } from '@wordpress/components';
  * External dependencies
  */
 import classnames from 'classnames';
-import { createElement, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -53,25 +52,16 @@ export default function LinkControlSearchResults( {
 	// 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
-		? __( 'Recently updated' )
+		? __( 'Suggestions' )
 		: sprintf(
 				/* translators: %s: search term. */
 				__( 'Search results for "%s"' ),
 				currentInputValue
 		  );
-
-	// VisuallyHidden rightly doesn't accept custom classNames
-	// so we conditionally render it as a wrapper to visually hide the label
-	// when that is required.
-	const searchResultsLabel = createElement(
-		isInitialSuggestions ? Fragment : VisuallyHidden,
-		{}, // Empty props.
-		<span
-			className="block-editor-link-control__search-results-label"
-			id={ searchResultsLabelId }
-		>
+	const searchResultsLabel = (
+		<VisuallyHidden id={ searchResultsLabelId }>
 			{ labelText }
-		</span>
+		</VisuallyHidden>
 	);
 
 	return (

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -125,12 +125,6 @@ $preview-image-height: 140px;
 	}
 }
 
-.block-editor-link-control__search-results-label {
-	padding: $grid-unit-20 $grid-unit-40 0;
-	display: block;
-	font-weight: 600;
-}
-
 .block-editor-link-control__search-results {
 	margin: 0;
 	padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5;

diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
@@ -901,7 +901,7 @@ describe( 'Default search suggestions', () => {
 
 		expect(
 			await screen.findByRole( 'listbox', {
-				name: 'Recently updated',
+				name: 'Suggestions',
 			} )
 		).toBeVisible();
 
@@ -991,7 +991,7 @@ describe( 'Default search suggestions', () => {
 		expect( searchInput ).toHaveValue( '' );
 
 		const initialResultsList = await screen.findByRole( 'listbox', {
-			name: 'Recently updated',
+			name: 'Suggestions',
 		} );
 
 		expect(
@@ -1008,7 +1008,7 @@ describe( 'Default search suggestions', () => {
 		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
 
 		const searchResultsField = screen.queryByRole( 'listbox', {
-			name: 'Recently updated',
+			name: 'Suggestions',
 		} );
 
 		expect( searchResultsField ).not.toBeInTheDocument();
@@ -1598,7 +1598,7 @@ describe( 'Selecting links', () => {
 
 			expect(
 				await screen.findByRole( 'listbox', {
-					name: 'Recently updated',
+					name: 'Suggestions',
 				} )
 			).toBeVisible();
 
@@ -1610,7 +1610,7 @@ describe( 'Selecting links', () => {
 
 			const searchResultElements = within(
 				screen.getByRole( 'listbox', {
-					name: 'Recently updated',
+					name: 'Suggestions',
 				} )
 			).getAllByRole( 'option' );