Specific errors for invalid/empty preset form elements (Update 3)

[anikbrazeau]

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 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/
alphagov/govuk-design-system-backlog#46