cds-snc / cds-snc/platform-forms-client
Specific error messaging for invalid preset form elements / custom regex
- Dominant language
- TypeScript
- Stars
- 46
- Forks
- 16
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 91
Description
# Update 3
https://github.com/cds-snc/platform-forms-client/issues/401
## Context
Follow up to #4502 which covered generic errors for basic form elements.
This card focuses on **invalid answers** in addition to **missing answers** for specific presets within the app such as date and other fields that have specific validation requirements, for example.
## User story
As an end-user, I need more specific context on what went wrong, which errors need to be fixed and how to fix them, so that I can provide the right information and submit the form successfully.
## Problem
Required questions provide ambiguous error messages when left empty. This violates WCAG criteria 3.3.3.
> Based on past issues #401, #424, #449, #3950
> See [AODA Audit ](https://docs.google.com/document/d/1PXLy_kvXF8GAn85b7iUBpt1sOhzDcNh7/edit) in Feb 2022
## Potential solutions
- Standardize approach for error messaging related to specific types and data validation
- Guidance on error message content for attributes of:
- Name
- Phone number
- North American
- International
- Email address
- Address
- Invalid
- Country
- Province
- Postal code
- File attachement
- Size
- Number
- Format
- Total
- Date
- Format
- Validity
- Number
- Constraints
- Limits
- Character limits
- Repeating sets limits
## Additional detail
See rows 9-16:
https://docs.google.com/spreadsheets/d/1qx6K-PkburkQ2anDbRAhLpgWIfbYF8aWV6N34NrFUp8/edit?gid=0#gid=0
## Acceptance criteria
- [ ] Includes English and French error message content
- [ ] Displays properly in Chrome, Firefox, Edge, Safari, and Opera
- [ ] Reads in the expected order on screen reader
- [ ] Works when there are multiple similar errors triggered on a page
- [ ] Provides context for the error focus state at the top of the error message list
- [ ] Links to the correct error / question
- [ ] Meets WCAG 2.1 AA requirements
## References
https://design-system.alpha.canada.ca/en/components/error-summary/
https://design-system.alpha.canada.ca/en/components/error-message/
https://design-system.service.gov.uk/components/error-summary/
https://github.com/alphagov/govuk-design-system-backlog/issues/46
Contributor guide
Assessment
This issue has not been assessed yet.