Forgot Login credentials : Error messages difficult to locate

Issue Summary

The error message present for input field "Username" and "Email" is not programmatically associated with its input fields.

Note-This issue is also observed on "Backlog" page refer screenshot 2.

Steps to Reproduce

1. Open "Forgot Login credentials" page
2. Keep the mentioned field empty and hit “Send” button

Actual Result

When user submit a form with empty data and click the “Send” 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.
3. Ensure that Focus should move to the input field instead of "Send" button,

Screenshot 1

Screenshot 2

Code snippet

<input aria-described="errors" class="text" id="forgot-login-password-username" name="username" type="text"> 
<div id="errors" class="error">Enter your username.</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 113.0.5672.63 (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