Merge pull request #471 from janette/accessibility-updates

Updating recline-slickgrid form labels to pass accessibility test

css/multiview.css

@@ -87,8 +87,11 @@
   vertical-align: top;
 }
 
-.recline-query-editor label {
+/* label for screen reader */
-  display:none;
+.recline-query-editor .form-inline label {
+  position: absolute; 
+  top:0; 
+  left:-9999px
 }
 
 /**********************************************************
@@ -160,6 +163,7 @@
   border-top-left-radius: 4px;
   border-bottom-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;
 }
 
 /**********************************************************

dist/recline.css

@@ -336,8 +336,11 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
   vertical-align: top;
 }
 
-.recline-query-editor label {
+/* label for screen reader */
-  display:none;
+.recline-query-editor .form-inline label {
+  position: absolute; 
+  top:0; 
+  left:-9999px
 }
 
 /**********************************************************
@@ -409,6 +412,7 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
   border-top-left-radius: 4px;
   border-bottom-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;
 }
 
 /**********************************************************

dist/recline.js

@@ -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> \
+          <label for="q">Search</label> \
-          <input class="form-control search-query" type="text" name="q" value="{{q}}" placeholder="Search data ..."> \
+          <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> \

src/widget.pager.js

@@ -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> \

src/widget.queryeditor.js

@@ -15,8 +15,8 @@ my.QueryEditor = Backbone.View.extend({
           <div class="input-group-addon"> \
             <i class="glyphicon glyphicon-search"></i> \
           </div> \
-          <label>Search</label> \
+          <label for="q">Search</label> \
-          <input class="form-control search-query" type="text" name="q" value="{{q}}" placeholder="Search data ..."> \
+          <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> \