calcite-input-date-picker (range) has no viable hidden label for screen readers

[abp6318]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Tabbing over the calcite-input-date-picker (range) OR using CTRL + OPTION + ARROWS does not read aloud the following:

• a label attribute (currently not supported)
• a label wrapping the element that is hidden or visible
• a label referencing the input with aria-labelledby

While aria-label does work, it results in a "serious" issue with axeDev tools.

Expected Behavior

That a screen reader can read aloud 1 or more of the following when referencing a calcite-input-date-picker (range):

• a label attribute (currently not supported)
• a label wrapping the element that is hidden or visible
• a label referencing the input with aria-labelledby

Reproduction Sample

https://codepen.io/abp6318/pen/LYaYVaE?editors=1000

Reproduction Steps

1. Open Chrome, Firefox, or Safari
2. Use COMMAND + F5 on Mac, or turn on a screen reader of your choice
3. Navigate to the input using tab or CTRL + OPTION + ARROWS

Reproduction Version

1.11

Relevant Info

MacBook Pro
16 inch 2023
Apple M2 Chip
32 GB
macOS Sonoma 14.1.2
Chrome
Default screen reader

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

Users who need screen readers cannot hear any text related to date inputs. Out specific use case is for date range validation.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Hub

[geospatialem]

Related: #7993

[geospatialem]

Spike results

It appears like the current value is read via the date format's placeholder text.

calcite-design-system/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

Lines 563 to 565 in b4ef364

	<span aria-hidden="true" class={CSS.assistiveText} id={this.placeholderTextId}>
	Date Format: {this.localeData?.placeholder}
	</span>

Would recommend we try to:

• If an applicable calcite-label is present supply the value to AT
  • In addition to the component's value, if present
• Add a new label property that supersedes a calcite-label
  • In addition to the component's value, if present
• If none of the above are true, the current state can remain as-is

[github-actions]

cc @geospatialem, @brittneytewks