Issue Summary

An error message not associated with respective input field in "Release" modal dialog.

Steps to Reproduce

1. Navigate to "Boards" dropdown present in the header section.
2. Navigate to the "KAN board" option and activate it.
3. Observe that "Kanban board" page has been appeared on the page
4. Navigate to the text elements provided in the Actual Results.
5. Inspect the code and check that heading levels are inappropriate.

Screenshot

Actual Results

When users submit form with empty fields, error message such as "You must specify a valid version name" get dynamically displayed below the form field and user's focus remains on "Release" button.
As a result, screen reader users are unaware about the occurrence of errors.

Expected Results

Apply the following changes: * Add 'aria-describedby' attribute to the form field i.e. "Version name".

• Reference 'id' attribute value of the containner used to display the error message such as "You must specify a valid version name" to 'aria-describedby' attribute.
• Set focus on the first field with error using the JavaScript .focus() method as soon as the form is submitted.

Code Snippet

<label for="ghx-release-name">Version name</label>
<input id="ghx-release-name" type="text" class="text" aria-describedby="errormessage">
<div id="errormessage" class="ghx-error">You must specify a valid version name</div> 

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOS Monterey Version 12.6
Chrome - Version 106.0.5249.91 (Official Build) (x86_64)
Firefox- Version 93.0 (32-bit)
Safari- Version 14.1.2 (16611.3.10.1.16)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest