Merge pull request #100 from finnlabs/20428-readable-labels

[20428] Optimize form labels for screenreader

app/views/meetings/_form.html.erb

@@ -32,15 +32,25 @@ See doc/COPYRIGHT.md for more details.
   </div>
 
   <div class="form--field">
-    <label class="form--label -required"><%= Meeting.human_attribute_name(:start_date) %></label>
+    <label for="meeting-form-start-date" class="form--label -required">
+      <span aria-hidden="true"><%= Meeting.human_attribute_name(:start_date) %></span>
+      <span class="hidden-for-sighted"><%= l(:label_start_date)%></span>
+    </label>
 
     <div class="form--field-container">
       <%= f.text_field :start_date,
+            id: 'meeting-form-start-date',
             required: true,
             size:     10,
             no_label: true %>
       <%= calendar_for('meeting_start_date') %>
+      <label for="meeting-form-start-time" class="hidden-for-sighted">
+        <%= Meeting.human_attribute_name(:start_time_hour) %>
+        <%= l(:label_time_zone) %>
+        <%= Time.zone.to_s %>
+      </label>
       <%= f.text_field :start_time_hour,
+            id: 'meeting-form-start-time',
             required: true,
             type:     'time',
             no_label: true,
@@ -50,10 +60,14 @@ See doc/COPYRIGHT.md for more details.
   </div>
 
   <div class="form--field">
-    <label class="form--label -required"><%= Meeting.human_attribute_name(:duration) %></label>
+    <label for="meeting-form-duration" class="form--label -required">
+      <%= Meeting.human_attribute_name(:duration) %>
+      <span class="hidden-for-sighted"><%= l(:text_in_hours)%></span>
+    </label>
 
     <div class="form--field-container">
       <%= f.number_field :duration,
+            id: 'meeting-form-duration',
             required: true,
             size:     5,
             no_label: true,

config/locales/en.yml

@@ -59,6 +59,8 @@ en:
   label_meeting_diff: "Diff"
   label_notify: "Send for review"
   label_version: "Version"
+  label_time_zone: "Time zone"
+  label_start_date: "Start date"
 
   notice_successful_notification: "Notification sent successfully"
   notice_timezone_missing: No time zone is set and %{zone} is assumed. To choose your time zone, please click here.