Issue Summary

On "Find an issue" page, the "Error in the JQL Query: Expecting operator before the end of the query. The valid operators are '=', '!=', '<', '>', '<=', '>=', '_{', '!}', 'IN', 'NOT IN', 'IS' and 'IS NOT'." error message is difficult to locate (appears on entering wrong query in "Advanced Query" combobox).

Steps to Reproduce

1. Open any project. 
2. Activate "Issues" button in the header section and select "Search for issues" option.
3. Navigate through page using screen reader.
4. Activate "Advanced" button. 
5. Enter wrong query in the "Advanced Query" combobox. 
6. Observe that the error message appears below combobox. 
7. Observe that the message is not announced for screen reader user. 

Screenshot 

Screen Recording 

Screen Recording 2024-02-08 at 2.52.48 PM.mov

Actual Results

When users activates "Search" button on entering wrong query in "Advanced Query" combobox, error message such as "Error in the JQL Query: Expecting operator before the end of the query. The valid operators are '=', '!=', '<', '>', '<=', '>=', '_{', '!}', 'IN', 'NOT IN', 'IS' and 'IS NOT'." and so on get dynamically displayed below the form field. 
 
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.
   

<textarea role="combobox" aria-label="Advanced Query" aria-describedby="error"
<div id="error">Error in the JQL Query: Expecting operator before the end of the query. The valid operators are '=', '!=', '<', '>', '<=', '>=', '~', '!~', 'IN', 'NOT IN', 'IS' and 'IS NOT'.</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