Issue Summary

The "Search "element in the header section appears and functions like a Combobox but is missing required ARIA role(s) and/or attribute(s).

Tested URL

https://instenv-21072-japp.instenv.internal.atlassian.com/secure/Dashboard.jspa 

Steps to Reproduce

1. Launch the URL
2. In the header section for the page, navigate to the "Search" input field keeping the screen reader on and try to search for something.

Actual Results

The form fields "Search"  for all the pages in the header section do not have a form label. The screen reader announces the input field as "Edit text", which does not clearly convey the functionality associated with it. As a result, users with visual impairments who use a screen reader will not be able to understand the purpose of the form fields.

Additionally, the element has a functionality of an autocomplete Combobox and thus has a missing role for Combobox.

Expected Results

Provide a unique and descriptive label for the discussed form field using the 'title" attribute such as "Search". This will help screen reader users to understand the purpose of the form field.

Additionally, the element should have the functionality of a Combobox. Apply the following to make the input Combobox element more accessible:

• A role="combobox" could be added to the <div> element.
• The dropdown menu should announce the label it is associated with.
• For this case, when the users focus to enter the Dropdown menu, it should announce content such as "Search combobox, Search for items on Jira". This will help the assistive technology user to understand the relation between the label and the dropdown menu.
• A working example for accessible Autocomplete Combobox could be found at: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html 

Screenshot

Screen Recording

Screen Recording 2022-05-31 at 11.48.31 AM.mov

Workaround

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

Bug Ref: 745606

Bulldog Ref: