Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
create a screen-reader-text label for search block (fix #17351) #17983
The search block should always have a label in it even if it's not visible.
When a user removes the label from the search block when the user is editing content; there should be still be a label present for the corresponding input field, so a user who is consuming the site with a screen reader or other assistive technology has a contextual clue of what the empty input field is :)
What this addition does is, when the label is deleted, a label named "search" is created but is not visually displayed on the screen because the screen-reader-text class is applied to the label element.
I've also manually tested this when you insert multiple search blocks into the same post; a unique label property is created for each one.
WordPress' Accessibility Labeling guidelines also state that all future code should have a label as well.
How has this been tested?
As mentioned at #17351 ; I've tested this in JAWS 2018 with default settings and chrome; and it functioned as I expected.
If you'd like to personally test yourself:
(Note: I haven't ran automatic tests on this yet, note to self, I'll do that https://github.com/WordPress/gutenberg/blob/master/docs/contributors/testing-overview.md#php-testing )
It's also my first feature/bug PR on Gutenberg. :)
jorgefilipecosta left a comment
Hi @skorasaurus, thank you for your contribution
I have already rebased this morning; did I not do it correctly? I haven't changed the screen-reader-text to the VisuallyHidden component just yet; as the introduction of the component is a little confusing for me (I'm also very new with React) and I'm trying to figure out how to correctly apply this....
In my naive opinion, since this block seems to me written more in php rather than in JS (compared to other blocks), should I just swap out the with screen-reader-text class with the components-visually-hidden class or should I do something else?
I can give you a correct answer once this branch is cleaned up, otherwise, I will have to guess. In PHP you can use
@gziolo, I rebased it and only my commit is now showing in the PR although I am unsure if I did properly (I followed directions from https://github.com/edx/edx-platform/wiki/How-to-Rebase-a-Pull-Request#perform-a-rebase).
I'm still using the screen-reader-text class since I haven't figured out how to replace it with the VisuallyHidden component.
You can't replace it in PHP code. It's fine as is.
There are 3 issues reported by PHP linter which needs to be addressed before this PR can be landed:
It needs to be tested. The code itself looks good. Good job!
I'm running ubuntu 18.04 and have been doing my development with vvv.
But there is one more error that remains:
Although I did not touch that, does that need to be fixed?