Issue Description

Missing explicit association for the "Search" and “Status" form fields. The 'for' and 'id' association is missing between the visual label and the form control.

Steps to Reproduce

1. Open the home page.
2. Navigate to the "Directories" link and activate it.
3. Navigate to the "Search" and “Status" form fields and observe the screen reader announcement.

Screenshot

Actual Behaviour

The explicit association of the “for” and “id” attributes is missing for the "Search" and “Status" form fields. In case of missing explicit association, the element will not be compatible with screen reader software. Thus it will be difficult for screen reader users to interact with it effectively.

Expected Result

The label for the mentioned field should get announced by the screen reader software when the user navigates through it.

The text such as "Search" and “Status" for form fields should be explicitly associated with the form control by providing an identical value that is unique from other IDs to the "for" and "id" attribute to ensure that assistive technologies identify the label for the form control correctly.

Alternatively,

Provide a descriptive and unique accessible name "Search" and “Status" form fields using the "aria-label" attribute in the <input> element of the mentioned instance.

Code snippet:

<label class="Field__Label-vqybw1-1 ghWQGY" id="Search-uid1-label" for="Search-uid1">Search</label>
(...)
<input id="Search-uid1" data-test="search-filter" name="search" class="css-k60tcv" value="">
(...)
<label class="Field__Label-vqybw1-1 ghWQGY" id="Status-uid2-label" for="Status-uid2">Status</label>
(...)
<input autocapitalize="none" autocomplete="off" autocorrect="off" id="Status-uid2" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">

Workaround

Not Available

Bug Ref: 359899