Issue Summary

On the “View pull request” page, the “Comments cannot be empty” error message is not communicated to the users of a screen reader.

Steps to Reproduce

1. Navigate to the “View pull request” page.
2. Navigate to the input field with a screen reader.
3. Submit the form without entering any data.
4. Observe the presence of an error message.
5. Observe that this error message is not communicated.

Screenshot

Actual Results

When the “What do you want to say ?” input field is left empty and users submit the form, an error message is dynamically added to the page. The keyboard focus remains on this button 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 who 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 an error message appears dynamically on form submission, make sure that the keyboard focus is moved to the topmost 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. Also, 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.

Code Snippet

<span id="e1" role="alert">Comments cannot be empty</span>

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.5.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest