Updating recline-slickgrid form labels to pass accessibility test

This commit is contained in:
Janette Day 2015-03-11 12:08:55 -07:00
parent 350573a325
commit 469d9479a4
6 changed files with 26 additions and 15 deletions

View File

@ -87,8 +87,11 @@
vertical-align: top;
}
.recline-query-editor label {
display:none;
/* label for screen reader */
.recline-query-editor .form-inline label {
position: absolute;
top:0;
left:-9999px
}
/**********************************************************
@ -159,7 +162,8 @@
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
border-top-right-radius: 0px;
height: 34px;
}
.recline-pager .pagination > li:last-child > a {
@ -167,6 +171,7 @@
border-top-right-radius: 4px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
height: 34px;
}
/**********************************************************

11
dist/recline.css vendored
View File

@ -336,8 +336,11 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
vertical-align: top;
}
.recline-query-editor label {
display:none;
/* label for screen reader */
.recline-query-editor .form-inline label {
position: absolute;
top:0;
left:-9999px
}
/**********************************************************
@ -408,7 +411,8 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
border-top-right-radius: 0px;
height: 34px;
}
.recline-pager .pagination > li:last-child > a {
@ -416,6 +420,7 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
border-top-right-radius: 4px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
height: 34px;
}
/**********************************************************

6
dist/recline.js vendored
View File

@ -4219,7 +4219,7 @@ my.Pager = Backbone.View.extend({
<div class="pagination"> \
<ul class="pagination"> \
<li class="prev action-pagination-update"><a href="" class="btn btn-default">&laquo;</a></li> \
<li class="page-range"><a><label for="from">From</label><input name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input name="to" type="text" value="{{to}}" /> </a></li> \
<li class="page-range"><a><label for="from">From</label><input id="from" name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input id="to" name="to" type="text" value="{{to}}" /> </a></li> \
<li class="next action-pagination-update"><a href="" class="btn btn-default">&raquo;</a></li> \
</ul> \
</div> \
@ -4296,8 +4296,8 @@ my.QueryEditor = Backbone.View.extend({
<div class="input-group-addon"> \
<i class="glyphicon glyphicon-search"></i> \
</div> \
<label>Search</label> \
<input class="form-control search-query" type="text" name="q" value="{{q}}" placeholder="Search data ..."> \
<label for="q">Search</label> \
<input class="form-control search-query" type="text" id="q" name="q" value="{{q}}" placeholder="Search data ..."> \
</div> \
</div> \
<button type="submit" class="btn btn-default">Go &raquo;</button> \

7
dist/recline.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -12,7 +12,7 @@ my.Pager = Backbone.View.extend({
<div class="pagination"> \
<ul class="pagination"> \
<li class="prev action-pagination-update"><a href="" class="btn btn-default">&laquo;</a></li> \
<li class="page-range"><a><label for="from">From</label><input name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input name="to" type="text" value="{{to}}" /> </a></li> \
<li class="page-range"><a><label for="from">From</label><input id="from" name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input id="to" name="to" type="text" value="{{to}}" /> </a></li> \
<li class="next action-pagination-update"><a href="" class="btn btn-default">&raquo;</a></li> \
</ul> \
</div> \

View File

@ -15,8 +15,8 @@ my.QueryEditor = Backbone.View.extend({
<div class="input-group-addon"> \
<i class="glyphicon glyphicon-search"></i> \
</div> \
<label>Search</label> \
<input class="form-control search-query" type="text" name="q" value="{{q}}" placeholder="Search data ..."> \
<label for="q">Search</label> \
<input class="form-control search-query" type="text" id="q" name="q" value="{{q}}" placeholder="Search data ..."> \
</div> \
</div> \
<button type="submit" class="btn btn-default">Go &raquo;</button> \