fix: a11y: search component submit accessible naming #2737
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
…viding an accessible name to small search submit, and a unique accessible name to the other variants. Sets default value to string of search, based on USWDS docs.
…e button naming issue on pages that may have multiple searches
…e is still support for internationalization
shkeating
changed the title
|
Taking a look now! |
AnnaGingle
previously approved these changes
Feb 1, 2024
brandonlenz
previously approved these changes
Feb 2, 2024
shkeating
dismissed stale reviews from AnnaGingle and brandonlenz
via
4bb23da
Co-authored-by: Brandon Lenz <[email protected]>
Co-authored-by: Brandon Lenz <[email protected]>
Co-authored-by: Brandon Lenz <[email protected]>
shkeating
force-pushed
the
2736-shk-small-button-search-name
branch
from
c147d9d to
2d89748
Compare
|
@shkeating is the tooltip supposed to be always visible, as Happo's showing? |
i don't know why that is happening. Is that happening on other branches? I didn't touch the tooltip code. And it looks like it is isolated to Safari? 🤔 |
|
status update: not behaving as expected. aria-label attribute getting added with incorrect name to form element insead of the search button. 
|
… was working correctly
…e' into 2736-shk-small-button-search-name
…sts test to account for that
shkeating
force-pushed
the
2736-shk-small-button-search-name
branch
from
de0959f to
740b873
Compare
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.
Summary
adds support for accessible name for search submit button in small search variant, and enhances naming capabilities on all search variants submit button to prevent duplicate naming issues on pages with multiple search components. Example of this scenario in USSF portal provided in screen shots.
Related Issues or PRs
How To Test
check output in ANDI, which should reflect the fallback name of "Search". Note, the aria label added to the non-small variants will not conflict with the typed name button text in the default instances, because the aria label will override the button text in the accessibility tree. This will allow us to have "search" appear visually for users who will have visual context, but more precise labeling for users of assistive tech.
I encourage reviewers to be vigilant in the changes made to the Search test file. My intention is to pull this into the USSF portal repo to ensure it works as expected.
Screenshots (optional)
Example of multiple searches in a single interface
ANDI outputs in local storybook for react-uswds
Buttons with inner text
Small Search: Buttons without Inner Text