Validation summary for form fields pattern

[yaelberger-commits]

Description

As a (user), I need to be able to see that I have errors in the form fields I filled out or that I've missed required steps in a task so that I can more quickly correct them without having to scroll down a screen to find the problem.

WHY are we building?
Currently we present some errors in context too far down the screen when creating a template and if a user tries to save a template without choosing a template category they will be stuck and have to scroll down to find out why
WHAT are we building?
Something like this error summary
https://design-system.alpha.canada.ca/en/components/error-summary/
VALUE created by our solution
Users can complete the "save template" task more quickly and can find out what their errors are faster

Documentation and Artifacts

Good docs, figma mockups, ADRs, screenshots etc.

Private Zenhub Video

Acceptance Criteria

Given a user makes a mistake or skips a required step when creating a template, when the error message is shown, then there is an error or validation summary at the top of the screen instead of in context so the user is aware there is a problem without having to scroll down

• Cypress UI tests if needed
• [ ]

• A11y
• Bilingualism

QA Steps

• Create a new template
• Fill out the form fields but don't select a template category
• Try to save the template
• See validation/error summary at the top of the screen explaining the problem and how to fix it

[yaelberger-commits]

Hey team! Please add your planning poker estimate with Zenhub @amazingphilippe @YedidaZalik @andrewleith

[amazingphilippe]

PR to add validation summary on the template forms:
cds-snc/notification-admin#2028

Reviewed and merged. Moving to QA

[andrewleith]

Nice!!! This was on my mind whenever I had an error on the template page, glad to see the initiative being taken here ❤️

Here is the PR where we first added the validation summary component, in case it helps!

cds-snc/notification-admin#1823

[yaelberger-commits]

One more bit to fix eventually, but could be good to go now

[andrewleith]

Small bug when you click an error summary link and it focuses automatically on the field after the next form post.

[andrewleith]

Card for that bug is here:
#1733