ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add accessible examples to styleguide datepickers 

closes CNVS-19323
refs CNVS-15543

Updates examples in styleguide to use the accessible
extras for datepickers that we're putting throughout the
rest of the app.

TEST PLAN:
1) generate styleguide
2) confirm Start date, Due date, available from, and available to fields
  in the component examples are accessible, and that their
  generated code examples show how to do that.

Change-Id: Ic53edba3f588bb7ed3d6bcca78e6489216fb37fc
Reviewed-on: https://gerrit.instructure.com/56611
Tested-by: Jenkins
Reviewed-by: Jason Madsen <jmadsen@instructure.com>
QA-Review: August Thornton <august@instructure.com>
Product-Review: Ethan Vizitei <evizitei@instructure.com>
This commit is contained in:
Ethan Vizitei 2015-06-16 14:09:03 -06:00
parent d9001e963c
commit 2025f81ea5
1 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/stylesheets/components/_ic-forms.scss
View File

@ -671,7 +671,17 @@ Reduce the width of your screen to see how the example components below both sca
<label class="ic-Label" for="demo-action-box-2">
Start date
</label>
<input type="datetime" id="demo-action-box-2" class="ic-Input"></input>
<label class="screenreader-only" id="demo-action-box-2-accessible-label">
<%= t("Start Date field for styleguide") %>
<%= datepicker_screenreader_prompt %>
</label>
<input type="datetime"
id="demo-action-box-2"
class="ic-Input"
aria-labelledby="demo-action-box-2-accessible-label"
data-tooltip
title="<%= accessible_date_format %>">
</input>
<button type="button" class="Button" aria-hidden="true" tabindex="-1">
<i class="icon-calendar-month"></i>
</button>
@ -712,31 +722,52 @@ Reduce the width of your screen to see how the example components below both sca
</div>
<div class="ic-Form-control">
<div class="ic-Input-group">
<input type="datetime" class="ic-Input" id="demo-action-box-5" placeholder="Due date" aria-label="Due date"></input>
<label class="screenreader-only" id="demo-action-box-5-accessible-label">
<%= t("Due Date field for styleguide") %>
<%= datepicker_screenreader_prompt %>
</label>
<input type="datetime" class="ic-Input" id="demo-action-box-5" placeholder="Due date" aria-labelledby="demo-action-box-5-accessible-label"
data-tooltip
title="<%= accessible_date_format %>">
</input>
<button type="button" class="Button" aria-hidden="true" tabindex="-1">
<i class="icon-calendar-month"></i>
</button>
</div>
</button>
</div>
</div>
<div class="ic-Form-control">
<div class="ic-Input-group">
<input type="datetime" class="ic-Input" id="demo-action-box-6" placeholder="Available from" aria-label="Available from"></input>
<label class="screenreader-only" id="demo-action-box-6-accessible-label">
<%= t("Available From field for styleguide") %>
<%= datepicker_screenreader_prompt %>
</label>
<input type="datetime" class="ic-Input" id="demo-action-box-6" placeholder="Available from" aria-label="demo-action-box-6-accessible-label"
data-tooltip
title="<%= accessible_date_format %>">
</input>
<button type="button" class="Button" aria-hidden="true" tabindex="-1">
<i class="icon-calendar-month"></i>
</button>
</div>
</button>
</div>
</div>
<div class="ic-Form-control">
<div class="ic-Input-group">
<input type="datetime" class="ic-Input" id="demo-action-box-7" placeholder="Until" aria-label="Until"></input>
<label class="screenreader-only" id="demo-action-box-7-accessible-label">
<%= t("Available Until field for styleguide") %>
<%= datepicker_screenreader_prompt %>
</label>
<input type="datetime" class="ic-Input" id="demo-action-box-7" placeholder="Until" aria-labelledby="demo-action-box-7-accessible-label"
data-tooltip
title="<%= accessible_date_format %>">
</input>
<button type="button" class="Button" aria-hidden="true" tabindex="-1">
<i class="icon-calendar-month"></i>
</button>
</div>
</button>
</div>
</div>
</div>
<div class="ic-Form-action-box__Actions">
<button type="button" class="Button Button--icon-action">
<span class="screenreader-only">Delete row</span>
@ -1635,4 +1666,4 @@ form.ic-Form-group { margin: 0; }
.ic-Form-action-box__Actions {
box-sizing: border-box;
padding-left: $ic-sp*2;
}
}