Issue Summary

On the "Create Plan | Configure Plan" page, color alone is used to distinguish error messages.

Steps to Reproduce

1. Open the Create Plan | Configure Plan" page
2. Keep the required field empty and click the create button.
3. Observe only color is used to distinguish the error message.

Screenshot

Actual Result

The form fields that caused the error are indicated by red text only, without an additional non-color indication that the field caused an error. As a result, a colorblind user may not be able to identify the required fields.

Expected Result

To make it easier for colorblind users to understand that an error has occurred, an additional method can be provided, such as using an image-icon (role="image") with an accessible name (aria-label="error"). This informative image can convey that an error has occurred.

Code snippet

<span role="image" aria-label="error"><div class="error control-form-error" id="chainName_error" data-field-name="chainName">Please enter a plan name.</div></span>

Environment

MacBook Pro (13-inch, 2020)
macOs Ventura 13.6
Chrome -Version 116.0.5845.187 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.2 (18614.3.7.1.5)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest

Workaround

Currently, there is no known workaround for this behavior. A workaround will be added here when available