UI Design - AA Validation Enhancement and Consistency
- Dominant language
- JavaScript
- Stars
- 23
- Forks
- 62
- Avg merge
- 24m
- Merged PRs (30d)
- 1
Description
There are some component validations (MHR/PPR) where a choice is required but the user did not make a choice, or the user left a component open. When the validation is triggered by the Review and Confirm button or Step, the validation scheme currently includes:
- autoscroll user to first component with error/unfinished
- show red side bar
- show red side label
- If this is a non-stepper app, there will also be a "please complete required information" message under the Review and Confirm button once pressed
In these cases there is not a field-specific error, and an additional text error is not shown. For users that see colour this works totally fine. For users that don't see colour (grayscale), then the addition of the side red bar may be the only indicator of the error they would notice within the component.
To examine:
- need to create an updated AA compliant error system that works for all types of components and errors
- decide on the error versus alert icon style (solid circle with exclamation point, outline circle with exclamation, outline circle with "i" icon, red triangle alert icon in message bar...)
- is an additional text error message required to meet AA when there are no field level error messages present? **yes**
- is the red side bar (and message under Review and Confirm button) enough to meet AA? **no**
- Make sure we don't have "red overload"
- Note: PPR is missing consistency of showing both the red bar and red side label in similar cases - examine for consistency across MHR and PPR apps
Some examples of existing component where a field-level message does not occur:
MHR:




PPR:



Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.