cds-snc / cds-snc/platform-forms-client

Specific error messaging for invalid preset form elements / custom regex

Open
#4,935 1 comment 0 reactions 0 assignees View on GitHub
design design-system development end users enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.