Consider <output> to display date

[aardrian]

After collecting the date from the user and converting it to the more formal format, consider putting that value into an <output> element so a user can see it (or hear it if a screen reader user) immediately.

This would allow them to quickly confirm the date and skip the picker altogether if the calculated date is correct.

I use this approach with good success in a prototype that I tested with small group of users on a project. A simplified example is here: https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html#Prototype

[fymmot]

That's an excellent idea! I had not considered <output> in this context but it looks really promising!

(By the way, your article and prototype was one of the major inspirations that made me start thinking about dates in the first place )

[aardrian]

Glad my post was helpful / inspirational. I was not sure if it was a factor, but the approach looked very familiar.

[fymmot]

@aardrian It's been a long time but I have rewritten the datepicker from scratch. Among other things, it will now reformat the input field when provided a valid date. I hope this will achieve your goal of immediately informing the user.

There is also a screen reader announcement (with @react-aria/live-announcer)

Please have a look if you want! https://fymmot.github.io/inclusive-dates/