Search Block should always have a label even if its not visible

[skorasaurus]

Describe the bug

The search block should always have a label in it even if it's not visible.

To reproduce
Steps to reproduce the behavior:

1. Create a new page or post
2. add search block
3. delete the search label
4. publish post/page

Expected behavior
Even if a label is removed (we should generally discourage it, imho); there should be a default field so a user who is consuming the site wit ha screen reader or other assistive technology has a contextual clue of what the empty input field is :)

WordPress' Accessibility Labeling guidelines also state that all future code should have a label as well.

This bug was initially addressed by @afercia at #16189 (comment)

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
all

Smartphone (please complete the following information):
all

Additional context
This issue is still applicable even when #17343 (as of 4454bff) is applied to the code.

[afercia]

Thanks @skorasaurus for your report!

I see the accessibility feedback given on #16189 (comment) hasn't been addressed yet and that PR was merged anyways. I'd kindly argue that's not the best way to improve collaboration between teams.

Regardless, all the points from the comment on #16189 still apply: WordPress aims to produce valid, semantic, as accessible as possible, markup.

The absence of a properly associated <label> element for the search field is actually a regression compared to core functions like get_search_form(), which makes sure there's always a label.

[skorasaurus]

I did an initial proof of concept at skorasaurus@f5c39fa that creates a label element of 'search' that's hidden with screen-reader-text if the label is initially removed by the user in the block editor. It's valid html but I don't have access to a screen reader at this moment (I do on weekdays) to determine if it would work as I expect.

[skorasaurus]

I've tested this on a screen reader (JAWS 2018; chrome 72.0.3626.121) and it is working as I expected:

What happens:
When a user focuses onto a search input field, even when no label is present, it will say
"search, edit, type in text"
I also tested in IE 11, and when no label is present, it will say "region search, edit, type in text".

If you want to change the default label - I made it to be "Search" - to something else, I'm ok with it.

I would appreciate it someone else were to test this and to make sure that my code matches the WP Guidelines.

To test:

1. • Create a new post
2. Add a search block
3. delete the label text above the search input field;
4. publish post.

(if there's an automated way to do this, that'd be super)

[epiqueras]

@skorasaurus Thanks for working on this!

Open a PR with your changes so that we can get them merged 😄

[skorasaurus]

closed in #17983 and merged \o/