Skip to content

Commit

Permalink
Visually hide the LinkControl initial/results heading (WordPress#50977)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
2 people authored and sethrubenstein committed Jul 13, 2023
1 parent ab8a75d commit 3fd0d00
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { VisuallyHidden } from '@wordpress/components';
* External dependencies
*/
import classnames from 'classnames';
import { createElement, Fragment } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -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 (
Expand Down
6 changes: 0 additions & 6 deletions packages/block-editor/src/components/link-control/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/link-control/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -901,7 +901,7 @@ describe( 'Default search suggestions', () => {

expect(
await screen.findByRole( 'listbox', {
name: 'Recently updated',
name: 'Suggestions',
} )
).toBeVisible();

Expand Down Expand Up @@ -991,7 +991,7 @@ describe( 'Default search suggestions', () => {
expect( searchInput ).toHaveValue( '' );

const initialResultsList = await screen.findByRole( 'listbox', {
name: 'Recently updated',
name: 'Suggestions',
} );

expect(
Expand All @@ -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();
Expand Down Expand Up @@ -1598,7 +1598,7 @@ describe( 'Selecting links', () => {

expect(
await screen.findByRole( 'listbox', {
name: 'Recently updated',
name: 'Suggestions',
} )
).toBeVisible();

Expand All @@ -1610,7 +1610,7 @@ describe( 'Selecting links', () => {

const searchResultElements = within(
screen.getByRole( 'listbox', {
name: 'Recently updated',
name: 'Suggestions',
} )
).getAllByRole( 'option' );

Expand Down

0 comments on commit 3fd0d00

Please sign in to comment.