Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Block: Search] Add a visually hidden label #35034

Merged
merged 2 commits into from Oct 5, 2021
Merged

Conversation

@carolinan
Copy link
Contributor

@carolinan carolinan commented Sep 22, 2021

Description

Closes #34989
Adds a visually hidden label to the search block when the label is toggled off or the label text is removed.

How has this been tested?

  1. You can use this sample code to add search blocks with different settings:
<!-- wp:paragraph -->
<p>Default:</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"Search","buttonText":"Search"} /-->

<!-- wp:paragraph -->
<p>Default label is toggled off:</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search"} /-->

<!-- wp:paragraph -->
<p>Custom label, toggled on:</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"Custom label","buttonText":"Search"} /-->

<!-- wp:paragraph -->
<p>Custom label, toggled off:</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"Custom label","showLabel":false,"buttonText":"Search"} /-->

<!-- wp:paragraph -->
<p>Text label is removed and toggled on:</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"","buttonText":"Search"} /-->

<!-- wp:paragraph -->
<p>Text label is removed and toggled off:</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"","showLabel":false,"buttonText":"Search"} /-->
  1. View the front and confirm that every search block has a label.
  2. Confirm that custom labels are used even when the label is visually hidden.
  3. Test that screen readers announce the label.

Types of changes

Bug fix

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
@carolinan carolinan marked this pull request as ready for review Sep 22, 2021
@carolinan carolinan requested a review from ajitbohra as a code owner Sep 22, 2021
Copy link
Member

@getsource getsource left a comment

Thanks @carolinan for the PR!
I tested, and this looks to work as expected.

A minor note, I noticed that now '<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>', is duplicated 3 times, and the code to generate the markup is fairly similar for all 4 of the labels.

It might be worth considering storing the pattern or making a helper function for generation of the label markup.

I went ahead and approved because it works as is, and readability with the above is a matter of opinion. Figured I'd leave the note, though, so you can make a decision on whether to optimize this more.

@carolinan
Copy link
Contributor Author

@carolinan carolinan commented Sep 26, 2021

Thanks @carolinan for the PR!
I tested, and this looks to work as expected.

A minor note, I noticed that now '<label for="%s" class="wp-block-search__label screen-reader-text">%s</label>', is duplicated 3 times, and the code to generate the markup is fairly similar for all 4 of the labels.

It might be worth considering storing the pattern or making a helper function for generation of the label markup.

I went ahead and approved because it works as is, and readability with the above is a matter of opinion. Figured I'd leave the note, though, so you can make a decision on whether to optimize this more.

I did that because we can't place the if statement inside the sprintf.

@getsource
Copy link
Member

@getsource getsource commented Sep 28, 2021

Definitely, however you prefer!

@carolinan
Copy link
Contributor Author

@carolinan carolinan commented Sep 28, 2021

I do agree its not optimized, but I don't know how else to do it.
I first used a variable to hold the CSS class names, but the result was not any less code than repeating it.

@carolinan carolinan requested a review from aristath Oct 5, 2021
@aristath aristath mentioned this pull request Oct 5, 2021
@aristath
Copy link
Member

@aristath aristath commented Oct 5, 2021

I do agree its not optimized, but I don't know how else to do it.
I first used a variable to hold the CSS class names, but the result was not any less code than repeating it.

I think I found an alternative method which should simplify the code and conditions a lot... I submitted a PR against your branch in #35337 so merging that here will update this PR accordingly. Unless I missed something, I believe the logic there is the same as what we're doing here 🤔

* simplify conditions
Co-authored-by: George Mamadashvili <[email protected]>
@carolinan carolinan merged commit 2d2e51e into trunk Oct 5, 2021
19 checks passed
@carolinan carolinan deleted the update/search-block-label branch Oct 5, 2021
@github-actions github-actions bot added this to the Gutenberg 11.7 milestone Oct 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

3 participants