From f74c68a26f6012b9b93de7f9bb593fa69451678e Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 21 Jan 2021 14:22:54 +0100 Subject: [PATCH 1/3] Improve block search input accessibility name and placeholder --- packages/block-editor/src/components/inserter/menu.js | 3 ++- .../src/components/inserter/quick-inserter.js | 3 ++- .../src/components/inserter/search-form.js | 10 ++++++++-- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 7db193e9e69c98..5e7d778446ad9d 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -167,7 +167,8 @@ function InserterMenu( { setFilterValue( value ); } } value={ filterValue } - placeholder={ __( 'Search' ) } + label={ __( 'Search' ) } + placeholder={ __( 'Search for blocks and patterns' ) } /> { !! filterValue && ( { setFilterValue( value ); } } - placeholder={ __( 'Search for a block' ) } + label={ __( 'Search' ) } + placeholder={ __( 'Search for blocks and patterns' ) } /> ) } diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js index be6807b55f1f9f..7914e842fd3dcd 100644 --- a/packages/block-editor/src/components/inserter/search-form.js +++ b/packages/block-editor/src/components/inserter/search-form.js @@ -12,7 +12,13 @@ import { VisuallyHidden, Button } from '@wordpress/components'; import { Icon, search, closeSmall } from '@wordpress/icons'; import { useRef } from '@wordpress/element'; -function InserterSearchForm( { className, onChange, value, placeholder } ) { +function InserterSearchForm( { + className, + onChange, + value, + label, + placeholder, +} ) { const instanceId = useInstanceId( InserterSearchForm ); const searchInput = useRef(); @@ -27,7 +33,7 @@ function InserterSearchForm( { className, onChange, value, placeholder } ) { as="label" htmlFor={ `block-editor-inserter__search-${ instanceId }` } > - { placeholder } + { label || placeholder } Date: Thu, 21 Jan 2021 15:13:08 +0100 Subject: [PATCH 2/3] Fix e2e test --- packages/e2e-tests/specs/widgets/adding-widgets.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js index 3fd2fe3c744a5a..93eabf8e53d990 100644 --- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js @@ -252,7 +252,7 @@ describe( 'Widgets screen', () => { // TODO: The query should be rewritten with role and label. const inserterSearchBox = await page.waitForSelector( - 'input[type="search"][placeholder="Search for a block"]' + 'input[type="search"][placeholder="Search for blocks and patterns"]' ); expect( await inserterSearchBox.evaluate( From c92a1795a7bee354c84c21df7f26ca3a04400fa2 Mon Sep 17 00:00:00 2001 From: Haz Date: Tue, 16 Feb 2021 12:26:11 +0100 Subject: [PATCH 3/3] Update labels --- packages/block-editor/src/components/inserter/menu.js | 4 ++-- .../block-editor/src/components/inserter/quick-inserter.js | 4 ++-- packages/e2e-tests/specs/widgets/adding-widgets.test.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 5e7d778446ad9d..47ee4c0b711ba1 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -167,8 +167,8 @@ function InserterMenu( { setFilterValue( value ); } } value={ filterValue } - label={ __( 'Search' ) } - placeholder={ __( 'Search for blocks and patterns' ) } + label={ __( 'Search for blocks and patterns' ) } + placeholder={ __( 'Search' ) } /> { !! filterValue && ( { setFilterValue( value ); } } - label={ __( 'Search' ) } - placeholder={ __( 'Search for blocks and patterns' ) } + label={ __( 'Search for blocks and patterns' ) } + placeholder={ __( 'Search' ) } /> ) } diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js index 93eabf8e53d990..58a7e78638fc27 100644 --- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js @@ -252,7 +252,7 @@ describe( 'Widgets screen', () => { // TODO: The query should be rewritten with role and label. const inserterSearchBox = await page.waitForSelector( - 'input[type="search"][placeholder="Search for blocks and patterns"]' + 'input[type="search"][placeholder="Search"]' ); expect( await inserterSearchBox.evaluate(