Search - Advanced Search - add a filter: labels are not associated with combobox elements.

Issue Summary

On Advanced search page, the combobox elements (which appears when user activates 'Add a filter' button) are not associated with the visual 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 'Add a filter' button on the left sidebar & activate it.
5. Select any options from the dropdown menu. For Example 'With Ancestor'.
6. Navigate to the Combobox element.

Actual Results

While navigating with screen reader turned on, when user navigate to the combobox elements (which appears when user activates 'Add a filter' button), the label is not announced by the screen reader. The visual labels are not associated with the Combobox elements programmatically. Currently the values of the for & id attributes don’t match in the code.

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

Screenshots

Screen recording

Screen Recording 2022-01-31 at 6.27.46 PM.mov

Expected Results

The screen reader should announce the labels when the Combobox elements receive keyboard focus. The values of the for & id attributes should match in the code.

Code snippet:

<label for="cql-field-ancestor-4">With ancestor<span class="aui-icon aui-icon-small aui-iconfont-remove" title="Remove filter"></span></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="cql-field-ancestor-4" style="width: 10px;">

Workaround

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