Skip to content

Commit ffeec60

Browse files
author
Aaron Cannon
committed
Accessibility: Improved labeling of many date fields.
Fixes CNVS-15542 Test plan: - Visit all date picker fields in canvas in Canvas using a screen reader, including the following: - Calendar - Assignments - Files - Assignment Peer review - Quizzes - Verify that each field's label (as read by the screen reader) makes it clear that the field takes a date. Change-Id: Ib681168ef571c47994f0f834987d4a5861c7c3a1 Reviewed-on: https://gerrit.instructure.com/47933 Tested-by: Jenkins Reviewed-by: Clay Diffrient <cdiffrient@instructure.com> QA-Review: Nathan Rogowski <nathan@instructure.com> Product-Review: Aaron Cannon <acannon@instructure.com>
1 parent b740936 commit ffeec60

12 files changed

Lines changed: 23 additions & 17 deletions

File tree

‎app/coffeescripts/react_files/components/RestrictedDialogForm.coffee‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ define [
239239
defaultValue: $.datetimeString(@state.unlock_at) if @state.unlock_at,
240240
className: 'form-control dateSelectInput',
241241
type: 'text',
242-
'aria-label': I18n.t('Available From')
242+
'aria-label': I18n.t('Available From Date')
243243
div className: 'control-group',
244244
label className: 'control-label dialog-adapter-form-calendar-label', I18n.t('Available Until')
245245
div className: 'controls dateSelectInputContainer',
@@ -248,7 +248,7 @@ define [
248248
defaultValue: $.datetimeString(@state.lock_at) if @state.lock_at,
249249
className: 'form-control dateSelectInput',
250250
type: 'text'
251-
'aria-label': I18n.t('Available Until')
251+
'aria-label': I18n.t('Available Until Date')
252252

253253
div className:"form-controls",
254254
button {

‎app/views/calendars/_calendar.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@
204204
</tr><tr>
205205
<td><%= before_label :due, "Due" %></td>
206206
<td>
207-
<%= f.text_field :due_at, :style => "width: 150px;", :class => "datetime_field" %>
207+
<%= f.text_field :due_at, :style => "width: 150px;", :class => "datetime_field", :"aria-label" => t("Due on Date") %>
208208
</td>
209209
</tr><tr class="context_select" style="<%= hidden unless @contexts.length > 1 %>">
210210
<td><%= before_label :calendar, "Calendar" %></td>

‎app/views/context_modules/_content_next.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ TEXT
311311
<td>
312312
<%= before_label('unlock_at', %{Unlock At}) %>
313313
</td><td>
314-
<%= f.text_field :unlock_at, :class => "datetime_field", :'aria-label' => t('#aria_labels.unlock_at_date', "Unlock at date") %>
314+
<%= f.text_field :unlock_at, :class => "datetime_field", :'aria-label' => t('#aria_labels.unlock_at_date', "Unlock on Date") %>
315315
</td>
316316
</tr>
317317

‎app/views/files/full_index.html.erb‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -300,13 +300,13 @@
300300
<td>&nbsp;</td>
301301
<td style="vertical-align: top; padding-left: 5px; padding-top: 6px; white-space: nowrap;"><%= before_label :lock_until, "Lock Until" %></td>
302302
<td>
303-
<%= f.text_field :unlock_at, :class => "datetime_field", :style => "width: 120px;" %>
303+
<%= f.text_field :unlock_at, :class => "datetime_field", :style => "width: 120px;", :'aria-label' => t("Lock Until Date") %>
304304
</td>
305305
</tr><tr class="lock_range full_lock">
306306
<td>&nbsp;</td>
307307
<td style="vertical-align: top; padding-left: 5px; padding-top: 6px; white-space: nowrap;"><%= before_label :lock_after, "Lock After" %></td>
308308
<td>
309-
<%= f.text_field :lock_at, :class => "datetime_field", :style => "width: 120px;" %>
309+
<%= f.text_field :lock_at, :class => "datetime_field", :style => "width: 120px;", :"aria-label" => t("Lock After Date") %>
310310
</td>
311311
</tr><tr>
312312
<td colspan="3">
@@ -341,13 +341,13 @@
341341
<td>&nbsp;</td>
342342
<td style="vertical-align: top; padding-left: 5px; padding-top: 6px; white-space: nowrap;"><%= before_label :lock_until, "Lock Until" %></td>
343343
<td>
344-
<%= f.text_field :unlock_at, :class => "datetime_field", :style => "width: 120px;" %>
344+
<%= f.text_field :unlock_at, :class => "datetime_field", :style => "width: 120px;", :"aria-label" => t("Lock Until Date") %>
345345
</td>
346346
</tr><tr class="lock_range full_lock">
347347
<td>&nbsp;</td>
348348
<td style="vertical-align: top; padding-left: 5px; padding-top: 6px; white-space: nowrap;"><%= before_label :lock_after, "Lock After" %></td>
349349
<td>
350-
<%= f.text_field :lock_at, :class => "datetime_field", :style => "width: 120px;" %>
350+
<%= f.text_field :lock_at, :class => "datetime_field", :style => "width: 120px;", :"aria-label" => t("Lock After Date") %>
351351
</td>
352352
</tr><tr>
353353
<td colspan="3">

‎app/views/jst/DiscussionTopics/EditView.handlebars‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@
156156
class="datetime_field input-medium"
157157
name="delayed_post_at"
158158
id="delayed_post_at"
159+
aria-label="{{#t}}Available From Date{{/t}}"
159160
{{! TODO: what would be the best way to get this formatted right? }}
160161
value="{{datetimeFormatted delayed_post_at false}}">
161162
</div>
@@ -171,6 +172,7 @@
171172
class="datetime_field input-medium"
172173
name="lock_at"
173174
id="lock_at"
175+
aria-label="{{#t}}Available Until Date{{/t}}"
174176
{{! TODO: what would be the best way to get this formatted right? }}
175177
value="{{datetimeFormatted lock_at false}}">
176178
</div>

‎app/views/jst/assignments/DueDateOverride.handlebars‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@
1111
</div>
1212
<div class="lock-header">
1313
<label id="overrides_unlock_at">
14-
{{#t "overrides.available_from"}}Available From{{/t}}
14+
<span aria-hidden="true">{{#t "overrides.available_from"}}Available From{{/t}}</span>
15+
<span class="screenreader-only">{{#t}}Available From Date{{/t}}</span>
1516
</label>
1617
</div>
1718
<div class="unlock-header">
1819
<label id="overrides_lock_at">
19-
{{#t "until"}}Until{{/t}}
20+
<span aria-hidden="true">{{#t "until"}}Until{{/t}}</span>
21+
<span class="screenreader-only">{{#t}}Available Until Date{{/t}}</span>
2022
</label>
2123
</div>
2224

‎app/views/jst/assignments/PeerReviewsSelector.handlebars‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,10 @@
7070
class="date_field datetime_field hasDatePicker"
7171
value="{{datetimeFormatted peerReviewsAssignAt false}}"
7272
type="text"
73+
aria-label="{{#t}}Assign Reviews on Date{{/t}}"
74+
aria-describedby="peer_reviews_assign_at_explanation"
7375
{{disabledIfIncludes frozenAttributes "peer_reviews"}}/>
74-
<div class="explanation nest">
76+
<div id="peer_reviews_assign_at_explanation" class="explanation nest">
7577
{{#t "peer_reviews_assign_at_explanation"}}
7678
Must come after due date. If blank, uses due date.
7779
{{/t}}

‎app/views/jst/calendar/editAssignment.handlebars‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<tr>
99
<td><label for="assignment_due_at">{{#t "due"}}Due:{{/t}}</label></td>
1010
<td>
11-
<input class="datetime_field" id="assignment_due_at" name="assignment[due_at]" size="30" style="width: 150px;" type="text"/>
11+
<input class="datetime_field" id="assignment_due_at" name="assignment[due_at]" size="30" style="width: 150px;" type="text" aria-label="{{#t}}Due on Date:{{/t}}"/>
1212
</td>
1313
</tr>
1414
<tr class="context_select">

‎app/views/jst/calendar/editAssignmentOverride.handlebars‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<tr>
55
<td>{{#t "due"}}Due:{{/t}}</td>
66
<td>
7-
<input class="datetime_field" id="assignment_override_due_at" name="assignment_override[due_at]" size="30" style="width: 150px;" type="text" />
7+
<input class="datetime_field" id="assignment_override_due_at" name="assignment_override[due_at]" size="30" style="width: 150px;" type="text" aria-label="{{#t}}Due on Date:{{/t}}"/>
88
</td>
99
</tr>
1010
<tr class="context_select">

‎app/views/profile/profile.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -593,7 +593,7 @@ TEXT
593593
<tr>
594594
<td><%= f.blabel :expires_at, :en => "Expires" %></td>
595595
<td>
596-
<div><%= f.text_field :expires_at, :class => "expires_field datetime_field", :style => "width: 120px;" %></div>
596+
<div><%= f.text_field :expires_at, :class => "expires_field datetime_field", :style => "width: 120px;", :"aria-label" => t("Expires on Date") %></div>
597597
<div style="font-size: 0.8em;" class="hint"><%= t('hints.expires_at', "leave blank for no expiration") %></div>
598598
</td>
599599
</tr>

0 commit comments

Comments
 (0)