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

[abp6318]

Check existing issues

• [X] 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

• [X] @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: https://github.com/Esri/calcite-design-system/issues/7993

[geospatialem]

Spike results

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

https://github.com/Esri/calcite-design-system/blob/b4ef364c2f7ea73cc810538835e33dae3da24742/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx#L563-L565

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[bot]]

cc @geospatialem, @brittneytewks