Issue Summary

The "Select time period unit" form field missing an accessible name

Steps to Reproduce

1. Open the home page
2. Navigate to the "Administration" button present in the header and activate it.
3. Navigate to the "Plan" link and activate it.
4. Navigate to the "Quick Filter" link and activate it.
5. Navigate to the "Configure" link and activate it.
6. Navigate to the "Add rule" link and activate it.
7. Turn on the screen reader and navigate to the mentioned form field.

Actual Results

The form field such as "Select time period unit" 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 "Select time period unit” 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="saveQuickFilterRule_timePeriodUnit">Select Time Period Unit</label> 
<select name="timePeriodUnit" id="saveQuickFilterRule_timePeriodUnit" class="select medium-field ">
<option value="minutes">minutes</option>
<option value="hours">hours</option>
(...)
</select>

Alternatively,

Provide a descriptive label using "Select time period unit” using the “aria-label” attribute in the <select> element.

<select name="timePeriodUnit" id="saveQuickFilterRule_timePeriodUnit" class="select medium-field " aria-label="Select time period unit">
<option value="minutes">minutes</option>
<option value="hours">hours</option>
(...)
</select>

Screenshot

Workaround

Not Available

Bug Ref: 460330