Issue Summary

The error message such as "At least one value must be set" is not associated with the input field.

Steps to Reproduce

1. Open the "IN-ITSM" page.
2. Navigate to the "Create Object" button and activate it.
3. A modal dialog appears on the page.
4. Using screen reader, submit the form empty.
5. Observe that the error message get displayed below the "Name" input field.
6. Press Tab key to navigate between the form fields.
7. Listen that screen reader fails to announce the error messages.

Screen Recording

Assets - InstEnv Jira - Google Chrome 2023-09-04 11-27-33.mp4

Actual Results

When the users submit the "Create Object" form with empty form fields, error message such as "At least one value must be set" get displayed below the form fields. However, the error message is not associated with the form fields.

As a result, screen reader are not aware about the error messages present on the page.

Expected Results

Apply the following changes:

• Add 'aria-describedby' attribute to the form field.
• Reference 'id' attribute value of the containner used to display the error message to 'aria-describedby' attribute. 

Code Snippet

<input aria-describedby="error-1" id="rlabs-insight-attribute-178" data-testid="e2e-178" class="text js-submit" name="rlabs-insight-attribute-178" value="">
<div id="error-1" class="rlabs-error">At least one value must be set</div>

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Monterey Version 12.3.1
Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest