WNMGDS-564: Change location of error messages and and ensure error messages don't rely on color alone

[davidakennedy]

Work to be done: We'd like to explore moving the error message location from above the input to below the input. (Jira ticket reference) This would also be combined with WNMGDS-530, which calls for the addition of another way to signify errors, in addition to color alone.

Why: The location change would align with general best practices in the industry. For more on this, see these two articles:

Error message guidelines: https://www.nngroup.com/articles/error-message-guidelines/
How to report errors in forms: https://www.nngroup.com/articles/errors-forms-design-guidelines/

Adding a way to make sure error messages don't rely on color alone would allow the design system and its child design systems to meet WCAG 2.0 success criterion 1.4.1: Use of Color in error messages. That calls for not relying on color alone. For more on this, see these two articles:

The Anatomy of Accessible Forms: Error Messages: https://www.deque.com/blog/anatomy-of-accessible-forms-error-messages/
Improving The Color Accessibility For Color-Blind Users: https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/

Work to be done:

1. Competitive analysis: How do other other design systems, sites, etc. handle the location of errors and the use of color for errors?
2. Child design system analysis: How would these changes impact our ecosystem?
3. Create design or prototype to clearly illustrate and change/enhance, if needed. What accessibility impact would these changes have?
4. Implement the solution in branch on GitHub, also viewable for feedback.
5. Merge changes into the design system.

This ticket is done when:

• The design solution has been signed off by stakeholders: Kristen Davis, Melissa Liupaeter, Allyssa Allen.
• The engineering work is merged into the design system's main branch.
• Any updates to documentation is made and release notes are written for the change.

[pwolfert]

This work was completed. Error messages now have an icon next to them, and the design system and/or individual components can be configured so that the errors are below the field.