Date and time formatting labels

[gcamacho079]

Description

Adds visually-hidden formatting helper text to date and time fields.

Related issues

Resolves DEV-216, DEV-254

[linear]

DEV-216 Instruction for text input format should be provided for screen reader users

The text input type doesn't provide information about the accepted format for entering times.

DEV-254 Formatting instructions should be provided for screen reader users

[brandonkelly]

@gcamacho079 I’ve added dynamic human-friendly labels to those hidden spans, but only for desktop browsers at the moment. So long as mobile gets the native inputs, it seems like the formatting labels aren’t going to really be necessary?

(If we decide to switch to non-native date/time inputs for mobile, we can easily add the formatting labels at that point, but that should be done in a separate PR.)

[brandonkelly]

Whoops, didn’t mean to close.

[gcamacho079]

@brandonkelly just tested this and setting aria-labelledby on these inputs ended up causing some problems, as it's overriding the aria-label attribute. We should definitely move the formatting reference ID to the front of describedBy

[brandonkelly]

@gcamacho079 Alright, made that change.

[gcamacho079]

Looks great, @brandonkelly!