USWDS - Validation: Adds complete/incomplete labels for screen readers. Resolves #4477#4719
Merged
Conversation
- Changes affect screen readers only - packages/usa-validation/src/index.js now adds hidden "incomplete" span on initialization - validate-input.js targets hidden data attribute for list items and sets complete/incomplete labels as necessary.
Updates the validation component's unit test and JS. The new hidden span is created by traversing the parent of validation input until it finds the checklist. Previously it looked for the first validation checklist, which causes problems when the component init's outside of document.body - Replace `select` with `selectOrMatches` to get proper elem context - Create constants for validation input and checklist item - Create function for hidden label span
4 tasks
mejiaj
suggested changes
Jun 13, 2022
mejiaj
left a comment
Contributor
There was a problem hiding this comment.
Nice work! Just a few changes.
Can we remove the usa-checklist__item--checked from usa-validation.twig:8 so it shows the correct initial state?
- Adds aria-controls to validation inputs - Moves aria-live and aria-atomic to parent list instead of list items - Sets aria-checked=false by default on initialization
mejiaj
approved these changes
Jun 17, 2022
Contributor
|
Placing |
Contributor
|
@thisisdano this is ready for final review! |
thisisdano
reviewed
Jul 27, 2022
thisisdano
reviewed
Jul 27, 2022
thisisdano
left a comment
Contributor
There was a problem hiding this comment.
@mejia one comment for you: https://github.com/uswds/uswds/pull/4719/files#r931626437
Merged
2 tasks
2 tasks
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Preview
Validation →
Description
Upon initialization, a new span is created for validation checklist items with the
usa-sr-onlyclass and adata-checklist-label=hiddendata attribute. By default the span is set to "Incomplete"When the validator updates the items to "checked", it will change the text content to
CompleteorIncompleteas necessary.Resolves #4477
Additional information
This PR also changes the validation event listener from
keyup changetoinput changeso that keys like shift wouldn't trigger the functionBefore you hit Submit, make sure you’ve done whichever of these applies to you:
npm testand make sure the tests for the files you have changed have passed.