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();