Issue Summary

The form field does not have an explicit or implicit <label> relationship, nor a title, aria-labelledby, or aria-label attribute.

Element Name: "Search by project or environment name" form field.
Location of the element: located inside the main screen.

Steps to Reproduce

1. Open the home page
2. Navigate to the "Project" link and activate it.
3. Select the project link from the main content and activate it.
4. Navigate to the main content and activate the plan link present in the "Plan Name" column.
5. Navigate to the "Deployment" link and activate it.
6. Turn on the screen reader and navigate to the "Search by project and environment name” form field.

Actual Results

The form field such as "Search by project and environment name” does not have a label associated with it and the title attribute is not included in its source code either. As a result, users with visual impairments who use a screen reader will not be able to understand the purpose of the input fields.

Expected Results

A visible label such as "Search by project and environment name” should be provided for the respective input field using the <label> element. Additionally “for“ and “id” attribute should be used to associate the label with its corresponding input field.

Note: Before implementing any visual label please connect with the content design team to take a suggestion/approval from them per business logic.

Code snippet

<label for="serach_by project">Search by project and environment name</label>
<input id="serach_by project" class="text table-search-bar__input full-width-field" type="text" name="filter" placeholder="Search by project or environment name" autocomplete="off">

Alternatively,

Provide a descriptive label using "Search by project and environment name” using the “aria-label” attribute in the <input> element.

<input class="text table-search-bar__input full-width-field" type="text" name="filter" placeholder="Search by project or environment name" autocomplete="off" aria-label="Search by project or environment name">

Screenshot

Workaround

Not Available

Bug Ref: 462530