From a2229f2684e2d5e36e0bab22b49370a20e51e939 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 25 May 2023 12:20:08 -0400 Subject: [PATCH 1/4] Use VisuallyHidden for the heading --- .../components/link-control/search-results.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 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 index 37ef1f72ce3d8b..a0159df113b779 100644 --- 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' ) + ? __( 'Links' ) : 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. - + const searchResultsLabel = ( + { labelText } - + ); return ( From e03f681facf22644ae131cabab6d554e3520f3d7 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 25 May 2023 12:20:46 -0400 Subject: [PATCH 2/4] Remove unnecessary styles --- .../block-editor/src/components/link-control/style.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index e91b60cd97643e..7ccc478cac2771 100644 --- 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; From 9c9fd3f5a6cb900fd02f13f9db7d14816fd64abb Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 30 May 2023 12:43:44 -0400 Subject: [PATCH 3/4] Use "Suggestions" instead of "Links" --- .../block-editor/src/components/link-control/search-results.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js index a0159df113b779..9d7ee7ca41abd9 100644 --- a/packages/block-editor/src/components/link-control/search-results.js +++ b/packages/block-editor/src/components/link-control/search-results.js @@ -52,7 +52,7 @@ 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 - ? __( 'Links' ) + ? __( 'Suggestions' ) : sprintf( /* translators: %s: search term. */ __( 'Search results for "%s"' ), From 6e5800d5e49183894bd107e9672ade59c836e673 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 30 May 2023 14:01:26 -0500 Subject: [PATCH 4/4] Update Recently updated title to match Suggestions title in unit tests --- .../src/components/link-control/test/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 5dfa5ad2f45870..5d17e497fb21da 100644 --- 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' );