List Filter Control Label - Provide a valid label for form fields - (2036570437)

[dqateam]

Module:

39 Value List and Value List Item
List and List Item

Violation:

Provide a valid label for the component's filter list item

WCAG Reference:

• 1.3.1 Info and Relationships
• 3.3.2 Labels or Instructions
• 4.1.2 Name, Role, Value

Instance ID:

2036570437

Severity:

10

Description:

[Issue]
There is filter form control in the "Test 2. Value List with Filter" section without a programmatically associated label describing their purpose.

[User Impact]
Screen reader users and users with cognitive disabilities may be unable to determine what these controls are for. Speech input users will have difficulty navigating to them.

[Code Reference]

<input aria-label="" class="" enterkeyhint="" inputmode="" placeholder="Filter list items" type="text">

Note:

[Suggestion]
Provide a valid label for form fields. Provide aria-label attributes in the <input> elements.

[Compliant Code Example]

<input aria-label="Filter list items" class="" enterkeyhint="" inputmode="" placeholder="Filter list items" type="text">

Media Type:

Forms

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[driskull]

This one would apply to list component as well.