Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
270 stars 75 forks source link

input-date-picker does not announce the purpose of each input when in range mode #7993

Open sansth1010 opened 9 months ago

sansth1010 commented 9 months ago

Check existing issues

Summary

US Department of Veterans Affairs has reported accessibility bug on their Hub site's search page which uses input-date-picker component to select date range. input-date-picker doesn't announce what each field in the component is for.

Actual Behavior

As seen in the video below, when input field of input-date-picker gets in focus - voice over says "You are currently in a menu pop-up combo box". Please unmute the video to hear the voice over. You can also see texts of what voice over is saying on the bottom left screen.

https://github.com/Esri/calcite-design-system/assets/94729944/8aa810d3-4f1e-4a2f-8dc4-fb0f0304dcfa

Expected Behavior

We should hear labels associated with the inputs inside of input-date-picker range like "Start date" and "End date".

Reproduction Sample

https://codepen.io/sansth1010/pen/rNobOwe

Reproduction Steps

  1. Open VoiceOver (CMD+F5)
  2. Click on "Date range" to expand accordion.
  3. Press Ctrl+Option+right-arrow to move focus to first date range input

Reproduction Version

1.4.1

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Calcite package

Esri team

ArcGIS Hub

geospatialem commented 6 months ago

Related: https://github.com/Esri/calcite-design-system/issues/8480