make course section editing accessible

closes CNVS-19330
refs CNVS-15543

This applies a screenreader-only label to the datetime pickers
used in the section editing UI, and some KB-only user tooltips
(though they are visible for all users).  The goal is to make
it clear what format to input dates and times in to users
for whom the rich selector isn't so great.

TEST PLAN:
- go to edit a course section (/courses/x/sections/y)
- Using a screenreader with your eyes closed, ensure you can figure out
  what date format to submit for the start and end dates with no
  other context.
- tab through to the same fields and prove that you see
  a little tooltip telling you what format to enter the date and time
in.

Change-Id: Iea4156379b914e3cc2f386e6921e3e7b2336c43d
Reviewed-on: https://gerrit.instructure.com/56649
Tested-by: Jenkins
Reviewed-by: Jason Madsen <jmadsen@instructure.com>
QA-Review: Jeremy Putnam <jeremyp@instructure.com>
Product-Review: Ethan Vizitei <evizitei@instructure.com>

app/views/sections/show.html.erb

@@ -126,12 +126,40 @@ h3 .tally {
     </tr>
   <% end %>
   <tr>
-    <td><%= f.blabel :start_at, :en => "Starts" %></td>
-    <td><%= f.text_field :start_at, :class => "datetime_field", :value => unlocalized_datetime_string(@section.start_at), :style => 'width: 120px;', :"aria-label" => t("Starts on Date") %></td>
+    <td>
+      <%= f.blabel :start_at, en: "Starts" %>
+      <label class="screenreader-only" id="section_starts_at_label">
+        <%= t("Section starts at") %>
+        <%= datepicker_screenreader_prompt %>
+      </label>
+    </td>
+    <td>
+      <%= f.text_field :start_at,
+                       class: "datetime_field",
+                       value: unlocalized_datetime_string(@section.start_at),
+                       style: 'width: 120px;',
+                       "aria-labelledby" => "section_starts_at_label",
+                       "data-tooltip" => "",
+                       title: accessible_date_format %>
+    </td>
   </tr>
   <tr>
-    <td><%= f.blabel :end_at, :en => "Ends" %></td>
-    <td><%= f.text_field :end_at, :class => "datetime_field", :value => unlocalized_datetime_string(@section.end_at), :style => 'width: 120px;', :"aria-label" => t("Ends on Date") %></td>
+    <td>
+      <%= f.blabel :end_at, en: "Ends" %>
+      <label class="screenreader-only" id="section_ends_at_label">
+        <%= t("Section ends at") %>
+        <%= datepicker_screenreader_prompt %>
+      </label>
+    </td>
+    <td>
+      <%= f.text_field :end_at,
+                       class: "datetime_field",
+                       value: unlocalized_datetime_string(@section.end_at),
+                       style: 'width: 120px;',
+                       "aria-labelledby" => "section_ends_at_label",
+                       "data-tooltip" => "",
+                       title: accessible_date_format %>
+    </td>
   </tr>
   <tr>
     <td colspan="2">