Search - Advanced Search - custom : Form elements must have labels

Issue Summary

On advanced search page, 'All content type' combobox does not have an accessible label.

Steps to reproduce

1. Navigate to the confluence homepage.
2. Navigate to the Search image button inside header section & activate it.
3. Navigate to 'Advanced search' link inside search modal & activate it.
4. Navigate to the 'custom' link under 'of type' group on the left sidebar & activate it.
5. Navigate to the 'All content types' Combobox element.

Actual Results

While navigating with screen reader turned on, when user navigate to the 'All content types' combobox element screen reader announces as 'Search text field blank'. An accessible label is not provided on the page.

This makes screen reader users difficult to understand the purpose of input field.

Expected Results

A visible & descriptive label such as 'Custom content type' should be provided via <label> element and it should be associated with the input field either explicitly or implicitly.

Note: The label text is provided as per QA perspective. Please confirm with content design team before finalising the same.

More info: https://dequeuniversity.com/rules/axe/4.3/label?application=axeAPI 

Screenshots

Search- Advanced search: https://axeauditor.dequecloud.com/api/v1/testrun-unit-screenshot/79e584ac-4df7-11ec-998e-a79664ed735e 

Workaround

If providing a visible label is not possible then provide a label via aria-labelledby attribute. 

1. Provide an unique id attribute to the 'OF TYPE' label element. For Example : <label for="cql-field-type-3" id="label1">Of type</label>
2. Provide an unique id attribute to the 'Custom' button element. For Example : <a href="#" role="button" data-value="custom" id="label2">Custom</a>
3. Provide aria-labelledby="label1 label2" to the Combobox input element.

Code snippet:

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-default" id="s2id_autogen3" style="width: 160px;" aria-labelledby="label1 label2">