Library: Add an explicit label to the search control #51781
Merged
Conversation
This file contains 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
talldan
added
[Type] Bug
aaronrobertshaw
approved these changes
Jun 22, 2023
There was a problem hiding this comment.
LGTM 👍
Do you think we should also update the SearchControl readme to promote the addition of label for a11y purposes?
|
Size Change: +5 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
|
@aaronrobertshaw It is already documented as a required prop, so I think it's ok. I noticed there's further discussion here - #51740 |
If it is required, it should be in the code example as well though don't you think? |
talldan
force-pushed
the
add/explicit-label-to-library-search
branch
2 times, most recently
from
5684f57 to
b3350d0
Compare
Oh, yeah, true. I've added a commit to improve the docs. |
alexstine
approved these changes
Jun 22, 2023
There was a problem hiding this comment.
Thanks @talldan for the PR. This will improve A11Y for sure. In a follow-up PR, can you fix the typing for label? Label is a type that comes from base-control types and it's optional. I think we should make it required for SearchControl.
/**
* If this property is added, a label will be generated using label property as the content.
*/
label?: ReactNode;
Could not provide exact line, GitHub is going through many changes right now and they broke accessibility for exact line permalinks. 😞
Co-authored-by: Aaron Robertshaw <[email protected]>
tellthemachines
force-pushed
the
add/explicit-label-to-library-search
branch
from
4c9c1dd to
e021758
Compare
I'll make that follow-up 👍 |
talldan
added
Backport to WP 6.7 Beta/RC
tellthemachines
removed
Backport to WP 6.7 Beta/RC
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
* Library: Add an explicit label to the search control * Improve SearchControl label * Fix example spacing Co-authored-by: Aaron Robertshaw <[email protected]> --------- Co-authored-by: Aaron Robertshaw <[email protected]>
priethor
added
[Focus] Accessibility (a11y)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Small single line change to add a label prop to the
SearchControlcomponent in the site editor's library.Why?
Inputs should be labelled and not just rely on placeholder.
While screenreaders (though I'm not sure if all screenreaders) will announce a placeholder, the label is more prominently and consistently announced when the input has text entered.
How?
Specify the label prop. This doesn't change anything visually, but is a good practice to follow for accessibility.
Testing Instructions for Keyboard
Expected: The label 'Search patterns' should be read
Screenshots or screencast
It looks the same.