Issue Summary

The error message that becomes available when the user keeps the "Summary" form field empty is not programatically associated with the input field. 

Steps to Reproduce

1. Open "View Issue"page.
2. Navigate to the "Edit Summary" button present in main content area and activate it.
3. Keep the mentioned form field empty and activate the "Save" button.
4. Navigate to the error message and inspect the code.
5. Observe that it is missing association with its respective form field.

Screenshot

Actual Results

When user keeps the mentioned input field empty and hits the "Save" button the error message such as "You must specify a summary of the issue" appears on the page, which is not programmatically associated with the input field.

As a result, the users might not understand the complete state of the input field.

Expected Results

The visual errors must be correctly associated with the form fields which will help screen readers to announce the error message when the users navigate back to the error fields.

Apply the following changes:

1.   Add "aria-describedby" attribute to the form field "Summary".
2.   Reference 'id' attribute value of the container used to display the error message to 'aria-describedby' attribute. 

Code Snippet

<div class="field-group">
<input aria-describedby="one" class="text long-field" id="summary" aria-label="Summary" name="summary" type="text" value="" data-qe-no-aria-label="true">
<div id="one" class="error inline-edit-error" data-field="summary">You must specify a summary of the issue.</div>
</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: Sonoma 14.3
Chrome - Version 119.0.6045.105 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.6 (18615.3.12.11.2)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest