bcgov / bcgov/entity

UI Design - AA Validation Enhancement and Consistency

Open
#19,124 5 comments 0 reactions 0 assignees View on GitHub
a11y Assets UX
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:

Screen Shot 2024-01-02 at 11.14.07 AM.png

Screen Shot 2024-01-02 at 11.12.00 AM.png

Screen Shot 2024-01-02 at 11.05.34 AM.png

Screen Shot 2024-01-02 at 11.04.07 AM.png

PPR:

Screen Shot 2024-01-02 at 11.22.46 AM.png

Screen Shot 2024-01-02 at 11.22.41 AM.png

Screen Shot 2024-01-02 at 11.21.52 AM.png

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.