You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The visible label of some search inputs mismatches their actual accessible name.
This is a barrier for some users, most notably sighted screen reader users and voice control users.
Why?
Important
It is worth reminding a few principles:
The placeholder attribute should not be used as a replacement for a label. Ideally, the placeholder attribute should only be used for a sample value, a hint about the expected format or instructions,
Design often wants to use the placeholder attribute as the input label. In limited cases this may be acceptable when the context helps clarify what the actual accessible name is. This should be evaluated on a case by case basis.
But, in this case the actual label must match the placeholder.
I would like the principles above to be included in the design guidelines Cc @WordPress/gutenberg-design
How?
Makes sure a few usages of the SearchControl and other search inputs use the same text for the label and the placeholder.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
…ess#65458)
* Match visible label of search inputs with their actual label.
* Adjust more tests.
* Adjust more tests.
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #65235
What?
The visible label of some search inputs mismatches their actual accessible name.
This is a barrier for some users, most notably sighted screen reader users and voice control users.
Why?
Important
It is worth reminding a few principles:
I would like the principles above to be included in the design guidelines Cc @WordPress/gutenberg-design
How?
SearchControl
and other search inputs use the same text for the label and the placeholder.ria-labelledby
is meant to be user to point to visible text. See Visually hide the LinkControl initial/results heading #50977 (comment)Testing Instructions
Suggestions
Search results for "%s"
Testing Instructions for Keyboard
Screenshots or screencast