Issue Summary

On advance issue search, the "Advanced Query" input is inaccessible with screen reader. The options  get displayed when the user focus on the search input field is not announced by a screen reader. 

Steps to Reproduce

1. Navigate to the Jira dashboard page.
2. Navigate to the "Issues" menu button in the header section & activate it.
3. Activate the "Search for issues" link from the menu.
4. Navigate to the "Advanced" link present in the main content & activate it.

Actual Results

While navigating with a screen reader, when the user navigates to the advance search input field the list of options such as "affectedVersion", "assignee", "attachments", etc is displayed, but when the user navigates through the options via up/down keys the screen reader doesn’t announce the options.

Also when user start typing into the input, the suggestions are displayed but this is not announced by screen reader.

This makes screen reader users difficult to understand & access these options effectively.

Expected Results

Apply the following changes 

• When user navigates to the input filed and list of options are displayed, the screen reader should also announce an instruction about this along with the label of the input field.
  For Example : "Advanced Query, 10 options available, use up/down arrow keys to navigate & press enter to select. after writing the query press enter to show results in main content".
• When user press up/down arrow keys to navigate, the options should be announced by the screen reader.
  For Example :  "option assignee, 2 of 10".
• When user starts typing into the input field, the suggestions are shown as per the keyword. The Screen reader should also announce a feedback about this.
  For Example : "3 options available, use up/down arrow keys to navigate."
• If the query is incorrect an error icon appears & if the query is correct a success icons appears, similarly screen reader should announce a feedback about this.
  For Example : "Your query is incorrect, please check again" or "Your query is correct, press enter to show results".

These instructions and feedbacks can be structured within live regions by specifying aria-live="polite" or role="status" on the containers. Ensure these containers specified with the live regions are present by default in which the instructions/feedback messages can be injected.

Code example:

<div role="status">3 Options available, use up/down arrow keys to navigate</div>

Screenshot

Screen Recording

Screen Recording 2022-03-28 at 6.53.12 PM.mov

Workaround

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

Bug Ref: 724567