Side Navigation : Error messages difficult to locate

Issue Summary

The error message present for input field "Project key" is not programmatically associated with its input fields.

Steps to Reproduce

1. Navigate to “Add link” link present in left navigation menu and activate it.
2. Observe a non dialog appears.
3. Keep the mentioned field empty and hit “Add” button.

Actual Result

When user submit a form with empty data and click the “Add” button, error messages get displayed just below the respective field which is not announced by screen reader user.
 
As a result screen reader users who are vision impaired, they will not receive any information that an error has been created, and what needs to be done to resolve the error.
 

Expected Result

The error messages present for mentioned fields should be associated with its input fields programmatically. This will ensure that the error is announced to the screen reader users.

1. Provide a unique id to the element which has the error message.
2. Provide an aria-describedby attribute to its respective input field and pass the id of the error message.

Screenshot

Code snippet

<input aria-describedby="errors" class="text" type="text" name="project-shortcuts-url-add" id="project-shortcuts-url-add" placeholder="e.g. http://www.atlassian.com">
<div id="errors"class="error">You need to enter a web address</div> 

Workaround

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

Environment

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