Input Time Picker with Label (Accordion Complex) - Provide a valid label for form fields - (2036570513)

[dqateam]

Module:

41 Accordion Complex

Violation:

Provide a valid label for form fields

WCAG Reference:

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

Instance ID:

2036570513

Severity:

10

Description:

[Issue]
There are buttons without accessible names. Examples include:

[User Impact]
Screen reader users will be unable to determine the purpose of these buttons. Speech input users will have difficulty activating them.

Test on https://geospatialem.github.io/calcite-samples/2-accordion

[Code Reference]

<div aria-controls="input-time-picker-9b295556-ebec-48e7-92c9-fd20abceba4b-popover" aria-haspopup="dialog" aria-owns="input-time-picker-9b295556-ebec-48e7-92c9-fd20abceba4b-popover" id="input-time-picker-9b295556-ebec-48e7-92c9-fd20abceba4b" role="combobox" aria-expanded="false">
 (...)
</div>

Note:

[Suggestion]
Provide a valid label for form fields. This includes providing accessible names for buttons. The accessible name of a button can be set with internal text, an aria-label attribute, or an aria-labelledby attribute. Good accessible names are both concise and descriptive.

[Compliant Code Example]

<div aria-label="Time of Day" aria-controls="input-time-picker-9b295556-ebec-48e7-92c9-fd20abceba4b-popover" aria-haspopup="dialog" aria-owns="input-time-picker-9b295556-ebec-48e7-92c9-fd20abceba4b-popover" id="input-time-picker-9b295556-ebec-48e7-92c9-fd20abceba4b" role="combobox" aria-expanded="false">
 (...)
</div>

Media Type:

Forms

Additional Resources:

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

[geospatialem]

Can we add a label prop to the component for additional context?

[geospatialem]

#6500 might have a similar solution - specific to select, slider, and combobox

[brittneytewks]

Research needs to determine estimate and priority

[geospatialem]

This is not valid - the buttons have accessible names, and are not accessible to AT as a tabindex of -1 is set for all, and AT users can use the arrow keys or numerical keys to change the value. Closing out the issue as context is provided, and it is a false positive of the accessibility audit.