Input Date Picker - Add context to default placeholder text to AT - (2036569968)

[dqateam]

Module:

17a Input Date Picker

Violation:

Avoid use of placeholder values to label or explain input

WCAG Reference:

• 1.3.1 Info and Relationships
• 4.1.2 Name, Role, Value

Instance ID:

2036569968

Severity:

8

Description:

[Issue]
There are form fields that rely on the placeholder attribute to supply their accessible name. Examples include:

• All input "date-picker" elements.

[User Impact]
Users with cognitive disabilities may be unable to determine the purpose of the field after the placeholder disappears. Some assistive technologies will not use the placeholder attribute as a field's accessible name, so screen reader users will have difficulty determining what fields are for and speech input users will have difficulty navigating to them.

[Code Reference]

<input aria-label="" class="" enterkeyhint="" inputmode="" placeholder="MM/DD/YYYY" type="text">

Note:

[Suggestion]
Avoid use of placeholder values to label or explain input.

Labels must meet the following requirements:

• The label must be visible.
• The label must be persistent. That is, a label must not disappear when text is entered into the field or an option is selected.
• The label must be programmatically associated with the form field. The most common way to do this is with a <label> element with a for attribute set to the ID of the field.
• The label must provide the accessible name of the field, or the label's exact text must be included in the accessible name.

[Compliant Code Example]

N/A

Media Type:

Forms

Additional Resources:

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

[geospatialem]

By default the component has placeholder text MM DD YYYY that is read back to screen readers. Maybe we could change this to read it as the expected format for AT using an aria-label attr?

[geospatialem]

Research will be determined in April for next dev steps needed.

[geospatialem]

We should provide context the placeholder text string is the date format, where the format is only provided to screen readers via an aria-describedby attribute and .sr-only class.

Something like:

<calcite-input aria-describedby="input-format" />
  <span id="input-format" class="sr-only">Date format: MM/DD/YYYY</span>

Since the context would need to change depending on the selected locale, there may be a better format to compliment all languages with translation strings.

W3C example: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/#ex_label

cc: #3671 for context to a similar solution when implementing a placeholder for input-time-picker.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with NVDA with Firefox and JAWS with Chrome on master.