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.

[geospatialem]

Updated to apply to the list component

[driskull]

The fix should be to change from using aria-label to label within the calcite-filter component.

calcite-design-system/packages/calcite-components/src/components/filter/filter.tsx

Line 273 in 331247f

aria-label={this.messages.label}

In the future, we could add a filterLabel property to specifically configure the list filter label.

[geospatialem]

For now it seems like its mostly covered in JAWS and NVDA. To @driskull's point above, we could add a new prop and in addition, have a fallback on a built-in translation, something like "Filter list items". Going to up the estimate and move to a future milestone to tackle. cc @brittneytewks

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified locally with JAWS and NVDA (refer to context in the PR here).

Created #8076 for the property for additional context in the future.