Calendar Picker changes the Hint text label from "MM/DD/YYYY" to date entered when text input area has focus about design-system HOT 1 CLOSED

Hi @bedwar2 👋,

What you’ve described is actually how we intended for this component to work. For background, this component aimed to address accessibility issues with the state of the art in the common input-masking pattern. Traditional masked inputs modify the value of an input while the user types, which is a confusing and frustrating experience for people using screen readers. We recognized this issue long ago when creating our existing masked field and relegated the input-modification phase of the interaction to happening only after the user blurs away from the input rather than modifying it in place in realtime.

However, sighted users are accustomed to that realtime feedback that an input mask provides, so we took that feedback and went back to the drawing board for this new component. decided to implement this idea by Brad Frost. It gives instant feedback to sighted users about the data they’re inputting while also minimizing the noise for screen readers. We worked with an accessibility expert to tune the screen-reader experience. This has yet to be fully validated in user testing, but it’s how we decided to implement the new date field.

We've actually been working on a documentation page for this new label-masked field pattern beyond its use in the calendar picker. Please let us know if you have any feedback about component API or the documentation we've written. We plan to publish it in the next release.

from design-system.