Issue Summary

On the "Advanced Roadmaps Feedback" page, the "You must specify a summary of the issue." error message is not communicated to the users of a screen reader.

Steps to Reproduce

1. Open the "Accessibility Assessment - Roadmaps" page.
2. Navigate to the "Give feedback" button and activate it.
3. A modal dialog appears on the page.
4. Using screen reader, navigate to the "Summary" input field.
5. Submit the form without entering any data.
6. Observe the presence of an error message.
7. Observe that this error message is not communicated.

Screen Recording

My Plan - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-01-29 15-38-16.mp4

Actual Results

When the "Summary" input field is left empty and users submit the form, an error message is dynamically added below the input field. The keyboard focus moves to "Advanced Roadmaps feedback" heading and there is no live region. As a result, this error message is not communicated to the users of a screen reader. This may particularly disadvantage users that navigate using assistive technology, such as screen readers. Users may struggle to identify and remediate the errors.

Expected Results

Error messages must be communicated to the users of assistive technologies. This can be done through moving focus and live regions.In this scenario, when error message appears dynamically on form submission, make sure that the keyboard focus is moved to the top-most field on the page that has an error.If this is not possible, you can prompt assistive technology to automatically identify the error message using assertive live region. Note that you cannot have multiple live regions announced simultaneously. As well, to work correctly, make sure that you have an empty container with the live region role (such as role="alert" or aria-live="assertive") on it already and then dynamically populate this container when the errors are triggered.As well, when the error messages are inline, make sure that the errors are associated with the relevant form fields. This is not strictly required by this success criterion. Nonetheless, we have identified the requirement here for completeness.

Code Snippet

<label for="summary">Summary <span class="visually-hidden">Required</span><span class="aui-icon icon-required" aria-hidden="true"></span> </label>
<input class="text long-field" id="summary" aria-label="Summary" name="summary" aria-describedby="error-message" type="text" value="" data-qe-no-aria-label="true">
<div id="error-message" role="alert" class="error">You must specify a summary of the issue.</div>

Workaround

Required, if there is no workaround please state:
Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Monterey Version 12.3.1
Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest