diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index 8b8092f4b9748e..06322843f41b7b 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -114,16 +114,23 @@ const LinkControlSearchInput = forwardRef(
}
};
+ const _placeholder = placeholder ?? __( 'Search or type URL' );
+
+ const label =
+ hideLabelFromVision && placeholder !== ''
+ ? _placeholder
+ : __( 'Link' );
+
return (
{
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
expect( searchInput ).toBeVisible();
@@ -150,7 +150,7 @@ describe( 'Basic rendering', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
expect( searchInput ).toBeVisible();
@@ -175,7 +175,7 @@ describe( 'Basic rendering', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -290,7 +290,7 @@ describe( 'Basic rendering', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -304,7 +304,7 @@ describe( 'Basic rendering', () => {
render( );
expect(
- screen.queryByRole( 'combobox', { name: 'Link' } )
+ screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
).not.toBeInTheDocument();
} );
@@ -317,7 +317,7 @@ describe( 'Basic rendering', () => {
);
expect(
- screen.getByRole( 'combobox', { name: 'Link' } )
+ screen.getByRole( 'combobox', { name: 'Search or type URL' } )
).toBeVisible();
} );
@@ -335,7 +335,7 @@ describe( 'Basic rendering', () => {
await user.click( editButton );
expect(
- screen.getByRole( 'combobox', { name: 'Link' } )
+ screen.getByRole( 'combobox', { name: 'Search or type URL' } )
).toBeVisible();
// If passed `forceIsEditingLink` of `false` while editing, should
@@ -348,7 +348,7 @@ describe( 'Basic rendering', () => {
);
expect(
- screen.queryByRole( 'combobox', { name: 'Link' } )
+ screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
).not.toBeInTheDocument();
} );
@@ -438,7 +438,7 @@ describe( 'Basic rendering', () => {
// Should revert back to editing mode.
expect(
- screen.getByRole( 'combobox', { name: 'Link' } )
+ screen.getByRole( 'combobox', { name: 'Search or type URL' } )
).toBeVisible();
} );
} );
@@ -461,7 +461,7 @@ describe( 'Searching for a link', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -487,7 +487,7 @@ describe( 'Searching for a link', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -538,7 +538,7 @@ describe( 'Searching for a link', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -571,7 +571,7 @@ describe( 'Searching for a link', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -616,7 +616,7 @@ describe( 'Searching for a link', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -635,7 +635,7 @@ describe( 'Searching for a link', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -667,7 +667,7 @@ describe( 'Searching for a link', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -699,7 +699,7 @@ describe( 'Manual link entry', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -735,7 +735,7 @@ describe( 'Manual link entry', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
if ( searchString.length ) {
@@ -769,7 +769,7 @@ describe( 'Manual link entry', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Remove the existing link.
@@ -937,7 +937,7 @@ describe( 'Manual link entry', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -973,7 +973,7 @@ describe( 'Link submission', () => {
render( );
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
const submitButton = screen.getByRole( 'button', {
@@ -1012,7 +1012,7 @@ describe( 'Link submission', () => {
render( );
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
const createSubmitButton = screen.queryByRole( 'button', {
@@ -1059,9 +1059,9 @@ describe( 'Default search suggestions', () => {
// Verify input has no value has default suggestions should only show
// when this does not have a value.
// Search Input UI.
- expect( screen.getByRole( 'combobox', { name: 'Link' } ) ).toHaveValue(
- ''
- );
+ expect(
+ screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+ ).toHaveValue( '' );
// Ensure only called once as a guard against potential infinite
// re-render loop within `componentDidUpdate` calling `updateSuggestions`
@@ -1091,7 +1091,7 @@ describe( 'Default search suggestions', () => {
await user.click( currentLinkBtn );
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Search input is set to the URL value.
@@ -1115,7 +1115,7 @@ describe( 'Default search suggestions', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1155,7 +1155,7 @@ describe( 'Default search suggestions', () => {
render( );
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
const searchResultsField = screen.queryByRole( 'listbox', {
@@ -1215,7 +1215,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1285,7 +1285,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1338,7 +1338,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1385,7 +1385,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1410,7 +1410,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1431,7 +1431,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1455,7 +1455,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1490,7 +1490,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Search Input UI.
searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1507,7 +1507,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
await user.click( createButton );
searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
const errorNotice = screen.getAllByText(
@@ -1586,7 +1586,7 @@ describe( 'Selecting links', () => {
await user.click( currentLinkBtn );
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
currentLinkUI = screen.queryByRole( 'group', {
name: 'Manage link',
@@ -1630,7 +1630,7 @@ describe( 'Selecting links', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1692,7 +1692,7 @@ describe( 'Selecting links', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -1783,7 +1783,7 @@ describe( 'Selecting links', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Step down into the search results, highlighting the first result item.
@@ -1841,7 +1841,7 @@ describe( 'Selecting links', () => {
// focus the search input
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
fireEvent.focus( searchInput );
@@ -2064,7 +2064,7 @@ describe( 'Post types', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
@@ -2093,7 +2093,7 @@ describe( 'Post types', () => {
// Search Input UI.
const searchInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Simulate searching for a term.
diff --git a/packages/block-editor/src/components/media-replace-flow/test/index.js b/packages/block-editor/src/components/media-replace-flow/test/index.js
index 1d326804f0dcca..12ecf32186d017 100644
--- a/packages/block-editor/src/components/media-replace-flow/test/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/test/index.js
@@ -110,7 +110,7 @@ describe( 'General media replace flow', () => {
);
const mediaURLInput = screen.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Paste or type URL',
expanded: false,
} );
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index b4bc99f06c9b4a..7830a934529aa4 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -60,7 +60,7 @@ test.describe( 'Buttons', () => {
).toBeFocused();
await pageUtils.pressKeys( 'primary+k' );
await expect(
- page.locator( 'role=combobox[name="Link"i]' )
+ page.locator( 'role=combobox[name="Search or type URL"i]' )
).toBeFocused();
await page.keyboard.press( 'Escape' );
await expect(
@@ -91,7 +91,7 @@ test.describe( 'Buttons', () => {
).toBeFocused();
await pageUtils.pressKeys( 'primary+k' );
await expect(
- page.locator( 'role=combobox[name="Link"i]' )
+ page.locator( 'role=combobox[name="Search or type URL"i]' )
).toBeFocused();
await page.keyboard.type( 'https://example.com' );
await page.keyboard.press( 'Enter' );
@@ -123,7 +123,9 @@ test.describe( 'Buttons', () => {
).toBeFocused();
await pageUtils.pressKeys( 'primary+k' );
- const urlInput = page.locator( 'role=combobox[name="Link"i]' );
+ const urlInput = page.locator(
+ 'role=combobox[name="Search or type URL"i]'
+ );
await expect( urlInput ).toBeFocused();
await page.keyboard.type( 'example.com' );
diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js
index da4910f7d3cc09..b73d218aa61868 100644
--- a/test/e2e/specs/editor/blocks/links.spec.js
+++ b/test/e2e/specs/editor/blocks/links.spec.js
@@ -116,7 +116,7 @@ test.describe( 'Links', () => {
await expect(
page.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} )
).toHaveValue( '' );
} );
@@ -361,7 +361,7 @@ test.describe( 'Links', () => {
await pageUtils.pressKeys( 'primary+k' );
const urlInput = page.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
// Expect the "Link" combobox to be visible and focused
diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
index 30a846e9f06089..47313590f65794 100644
--- a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
@@ -591,7 +591,7 @@ class LinkControl {
getSearchInput() {
return this.page.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
}
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
index 19da69cd27c4aa..83e95a08c0f6a2 100644
--- a/test/e2e/specs/editor/blocks/navigation.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -615,7 +615,7 @@ class Navigation {
getLinkControlSearch() {
return this.page.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
}
@@ -668,7 +668,7 @@ class Navigation {
*/
async addPage( label ) {
const linkControlSearch = this.page.getByRole( 'combobox', {
- name: 'Link',
+ name: 'Search or type URL',
} );
await expect( linkControlSearch ).toBeFocused();