Input, Input Message - Provide a clear indication of fields in error for information that is submitted - (2036569949)

[dqateam]

Violation:

Provide a clear indication of fields in error for information that is submitted

WCAG Reference:

• 3.3.1 Error Identification

Severity:

6

Media Type:

Forms

---

Areas for Remediation:

• Title: Input, Input Message - Provide a clear indication of fields in error for information that is submitted - (2036569949)

• Module: Input, Input Message
  Issue
  There are errors/ informative messages that do not clearly describe the messages. Examples include:

• Success message

• warning message

• error message

User Impact
Screen reader users and users with cognitive disabilities will have difficulty determining that these messages are errors instead of general instructions on how to fill the fields. They will also have difficulty determining which error corresponds to which field.

Code Reference

N/A

Suggestion
Provide a clear indication of fields in error for information that is submitted. Include the name of the field in the error message. In case of any informative message, the message should be clear enough.

Compliant Code Example

N/A

---

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[driskull]

Seems like we can address this as part of the form validation epic we have. I would say this isn't valid since we haven't tacked that effort yet.

[geospatialem]

Blocking the above issue until the efforts from #4598 are incorporated in across input-named components, anticipated for Jan/Feb 2024.

[tyanthony]

We have noticed this bug on ArcGIS Mission Manager as well and have had this flagged by an a11y audit. If this could be included/completed that would be great. We release with Enterprise, so our team has asked that if this could be completed by at least end-of-August that would be preferable.

Specifically,

For most form controls, the best way to associate the error is to use an aria-describedby attribute on the field set to the ID of the corresponding error.

<input aria-label="" aria-describedby="error" autofocus="" class="" enterkeyhint="" inputmode="" maxlength="100" placeholder="Task title" type="text">
<calcite-input-message id="error" class="leader-quarter" icon="exclamation-mark-triangle" status="invalid" active="" scale="m" calcite-hydrated="">Title required</calcite-input-message>

@geospatialem

[geospatialem]

@tyanthony Thanks for re-pinging this issue, we're winding down the efforts of our form validation effort mentioned above, and this still seems to be a valid bug. Will look at addressing in a future milestone in the next few weeks:

---

Current unsupported example with 2.8.0: https://codepen.io/geospatialem/pen/jORoLWq

---

Future implementation note:
We should provide the validationMessage (default or user-defined) to AT by:

• Adding an aria-invalid to the component when status="invalid" and
• Associating the validationMessage contents using aria-errorMessage

For instance:

• Native HTML: https://codepen.io/geospatialem/pen/MWdYMWJ and
• CC workaround/implementation: https://codepen.io/geospatialem/pen/XWwJLjV

[github-actions]

cc @geospatialem, @brittneytewks

[driskull]

I don't think we need to do anything to input-message since it is primarily being used internally now.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with JAWS and NVDA on Windows in v2.12.0-next.24 🏆