Add icon to text input error state screen reader output

[AnnaGingle]

User story

As a user with colorblindness or who relies on a screen reader, I need error messages on form fields to include a non-color indicator, such as icons with text equivalents, in addition to the red color. This will ensure I can clearly understand when a form field has an error without relying on color alone. By providing these additional cues, I will have a clear, accessible, and usable experience when filling out forms, reducing confusion and helping me to correct mistakes more easily.

Acceptance criteria

• The changes match this design.
• All inputs are updated so that the icon is displayed with the error text. This applies to every form in our manage.get.gov application (not including django admin).
• The error icon has the screen reader output of Error.

Additional context

This is a finding from the Q4 2024 Sec508 Compliance Results #2835.

Related issues

• Cause by Q4 2024 Sec508 Compliance Results #2835.
• Child issue of Bundle: Error messages and alert accessibility #2928

Prioritization Comments

WCAG Conformance Level: 2.1 AA
WCAG Standard that applies:
1.4.1 - Use of Color (Critical)
3.3.1 - Error Identification (Critical)
4.1.2 - Name, Role, Value (Critical)
Critical Failure if Not Met?: Yes
Prioritization: Blocker
Reason: This affects the accessibility of error messages for users with colorblindness or those relying on screen readers, as the current setup relies solely on color to indicate errors. This creates barriers for non-visual users and is not in conformance with key accessibility principles. Adding non-color indicators (e.g., error icons with text equivalents) ensures clarity and usability for all users, including those who cannot perceive color.