Issue Summary

On "Find an issue" page, the error messages are difficult to locate in "Permission helper" and "Notification helper" modal.

Note : This issue is found on "Basic" and "Advanced" mode.

Steps to Reproduce

1. Open any project. 
2. Activate "Issues" button in the header section and select "Search for issues" option.
3. Activate Actions button.
4. Activate "Permission helper" or "Notification helper" buttons.
5. Activate "Submit" button without filling "User" mandatory fields. 
6. Observe that the error message appear below mandatory form field.
7. Observe that the error messages are not announced for screen reader users.

Screenshot

Actual Results

 
When user activates "Submit" button by keeping mandatory field empty, error message "Please select a user" get dynamically displayed below the form field and user's focus remains on "Submit" button.
 
As a result, screen reader users are unaware about the occurrence of errors.

Expected Results

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.

<label for="a1">User *</label>
<input id="id" role="combobox" aria-describedby="usererror" aria-required="true"...>
<div id="usererror">Please select a user</div>

Workaround

Not available

Environment

MacBook Pro (16-inch, 2021)

macOS Sonoma Version 14.1

Chrome - Version 119.0.6045.159 (Official Build) (arm64)

Firefox- Version 93.0 (32-bit) Safari- Version 17.1 (19616.2.9.11.7)

JAWS- Version 2023

NVDA- Version 2020.3

Voiceover - Version Latest