Issue Summary

The "You must specify a summary of the issue" error message is difficult to locate.

Steps to Reproduce

1. Open the "Home" page.
2. Navigate to the header section and activate "Feedback" button > a modal appears.
3. Navigate onto the "Summary" form field with a screen reader and trigger the error message by submitting the form with an empty data.
4. Observe the presence of an error message.
5. Observe that this error message is not communicated.

Screen Recording

Screen Recording 2025-01-17 at 1.42.00 PM.mov

Screenshot

Actual Result

When users submit the form by activating the "Submit" button with an empty data, an error message is dynamically added to the page. The keyboard focus remains on this button and there's no live region. As a result, screen reader users are unaware about the occurrence of error.

Expected Result

User's focus should be set on the first form field with error. Additionally, the screen reader should announce the error messages when users navigate to the respective form fields.

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 with an empty data.

 Code Snippet

<label for="A1">Summary</label>
<input id="A1" aria-describedby="ER1" ...>
<span id="ER1">You must specify a summary of this issue</span> 

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 SEQUOIA 15.2
Chrome - Version 132.0.6834.84 (Official Build) (64-bit)
Firefox- Version 128.6.0esr (64-bit)
Safari- Version - 18.2 (206220.1.16.11.8)
JAWS- Version 2023
NVDA- Version 2023.2
Voiceover - Version Latest