fix(z-input): add visual indicator for required fields#626
Open
ada-workbackai wants to merge 2 commits intomasterfrom
Open
fix(z-input): add visual indicator for required fields#626ada-workbackai wants to merge 2 commits intomasterfrom
ada-workbackai wants to merge 2 commits intomasterfrom
Conversation
Adds asterisk (*) visual indicator to required form fields to comply with WCAG 3.3.2 Level A. User impact: Users with cognitive disabilities or those unfamiliar with form conventions will now clearly see which fields are required before attempting submission.
Applied prettier formatting to match project code style standards.
Contributor
Author
|
Pushed changes to fix CI failures:
The CI checks should now pass. Ready for review when you have a chance. |
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
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
Fixes WCAG 3.3.2 (Labels or Instructions) by adding a visual asterisk (*) indicator to required form fields in the z-input component.
Issue: Required form fields (such as "Nome" and "Cognome" on the student registration form) lack visual indicators to show users which fields must be completed. While the Continue button remains disabled until fields are filled, there is no visual cue (such as an asterisk) to inform users that these fields are required.
Solution: Modified the
renderLabel()method in the z-input component to append a red asterisk (*) witharia-hidden="true"when therequiredprop is set to true. The asterisk provides a universally recognized visual indicator while therequiredattribute on the input element provides programmatic indication for assistive technologies.Implementation Details
renderLabel()method--color-form-hover-error) for visual prominencearia-hidden="true"on asterisk since therequiredattribute already provides programmatic indicationApplication Usage Requirements
Important: Applications using the z-input component must add the
requiredattribute to achieve full WCAG 3.3.2 compliance:The following applications should be updated to add
requiredattributes:/registrazione/studente/1) - Nome and Cognome fieldsTest Plan
yarn build.wcrequiredprop is truearia-hidden="true"prevents duplicate announcementsEvidence
View before/after screenshots and full audit details:
https://app.workback.ai/dashboard/issue/5031/
WCAG Reference:
3.3.2 Labels or Instructions (Level A)