Datepicker doesn't communicate date format to screen reader

[jelbourn]

Summary

Screen Reader does not announce the date format . Eg: DD/MM/YYYY OR MM/DD/YYYY OR DD/MMM/YYYY etc within basic datepicker edit box

Reproduction on material.angular.io

1. Linear navigate to ' Components ' menu item and click 'Enter' to open components page.
2. Linear navigate forward and set focus on expand collapse left hand menu item ' Form Controls'
3. Click 'Enter' key to expand OR collapse this menu item
4. Linear navigate into "Datepicker" and click ENTER keystroke.
5. Navigate into tabs "Overview" and Click ENTER
6. Navigate into "Basic datepicker" heading and navigate into enter date edit box.
7. Type various formats of date.

Additional comments

Observed on other datepicker components as well.

[jelbourn]

@mmalerba we should compare this to some other datepickers to see what they do.

[Splaktar]

We may be able to fix this via a11y documentation of the component.

[mmalerba]

Looking around several different datepicker implementations I saw 3 common ways of doing this:

1. Specify the format as part of the label e.g. "Appointment date (MM/DD/YYYY)"
2. Specify the format as the placeholder
3. Specify the format in a separate element linked by aria-describedby

I'm going to consult with some a11y experts to see if there's a recommended way. #​3 is really the only one we could implement for people, and even then I'm not sure we'd want to, because if someone also set the the format in the placeholder it would be read twice.

Given that I'd say this is most likely going to come down to better documentation, as @Splaktar suggested