Issue Summary

An error message is not associated with respective form fields in "Log Work" modal dialog.

Note:- A similar issue has been observed on the "Login page" of the instruction message not associated with the form filed. Please refer screenshot 2

Steps to Reproduce

1. Navigate to "Issues" dropdown and activate it.
2. Select any issue from "Recent Issues" section.
3. Observe that "View an Issue" page has been appeared on the page.
4. Press the "." button and check that pop up has appeared on the screen.
5. Navigate to the "Log work" option an activate it.
6. Observe that "Log work" modal dialog has been appeared on the screen.
7. Try to submit the empty form.
8. Check that error messages has appeared but not associated.

Screenshot 1

Screenshot 2

Actual Results

When users submit "Log Wok" form empty, error messages such as "You must indicate the time spent working." get dynamically displayed between the form fields.
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.
• Reference 'id' attribute value of the containner used to display the error message to 'aria-describedby' attribute.
• Set focus on the first field with error using the JavaScript .focus() method as soon as the form is submitted.

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 Ventura Version 13.3.1
Chrome - Version 112.0.5615.49 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest