Add accessible labels for start and end datetime fields on "Add an Event" form

[carrythebanner]

Most of the form fields on the "Add an Event" page (http://calagator.org/events/new) have a label element which is properly associated with its corresponding input element. Screen readers rely on those labels to properly announce each field.

The "When" start & end date and time fields don't, however. For screen reader users, this results in four generic text fields in a row. VoiceOver announces each one as simply "edit text" for example.

This can be fixed by giving each input a visually-hidden label. There is already an sr-only utility class, which can be used like:
<label class="sr-only label" for="date_start">Start Date</label>
<input type="text" name="start_date" id="date_start" value="" class="date_picker hasDatepicker" required>

Additionally, the "@" and "to" strings between fields aren't necessary for screen readers, and just add noise. Those can be hidden with aria-hidden, like:
<span class="at" aria-hidden="true">@</span>

[evolve2k]

I think this is resolved from the related merge.
Recommend close.