Merge pull request #209 from stramel/development

Added accessibility classes to default inputs

Author: davidlgj

src/directives/decorators/bootstrap/default.html

@@ -1,21 +1,27 @@
 <div class="form-group schema-form-{{form.type}} {{form.htmlClass}}"
      ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false }">
-  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
+  <label class="control-label" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
 
   <input ng-show="form.key"
          type="{{form.type}}"
          step="any"
          sf-changed="form"
          placeholder="{{form.placeholder}}"
          class="form-control {{form.fieldHtmlClass}}"
+         id="{{form.key.slice(-1)[0]}}"
          ng-model-options="form.ngModelOptions"
          ng-model="$$value$$"
          ng-disabled="form.readonly"
          schema-validate="form"
-         name="{{form.key.slice(-1)[0]}}">
+         name="{{form.key.slice(-1)[0]}}"
+         aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
   <span ng-if="form.feedback !== false"
         class="form-control-feedback"
-        ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>
+        ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"
+        aria-hidden="true"></span>
+  <span ng-if="hasError() || hasSuccess()"
+        id="{{form.key.slice(-1)[0] + 'Status'}}"
+        class="sr-only">{{ hasSuccess() ? '(success)' : '(error)' }}</span>
   <div class="help-block"
        ng-show="(hasError() && errorMessage(schemaError())) || form.description"
        ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>

src/directives/decorators/bootstrap/readonly.html

@@ -1,6 +1,6 @@
 <div class="form-group">
-  <label ng-show="showTitle()">{{form.title}}</label>
-  <input ng-if="form.type !== 'textarea'" type="text" disabled class="form-control" value="{{$$value$$}}">
+  <label ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
+  <input ng-if="form.type !== 'textarea'" type="text" disabled class="form-control" id="{{form.key.slice(-1)[0]}}" value="{{$$value$$}}">
   <textarea ng-if="form.type === 'textarea'"  disabled class="form-control">{{$$value$$}}</textarea>
   <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
 </div>

src/directives/decorators/bootstrap/textarea.html

@@ -1,6 +1,7 @@
 <div class="form-group has-feedback {{form.htmlClass}} schema-form-textarea" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
-  <label ng-show="showTitle()">{{form.title}}</label>
+  <label ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
   <textarea class="form-control {{form.fieldHtmlClass}}"
+            id="{{form.key.slice(-1)[0]}}"
             sf-changed="form"
             placeholder="{{form.placeholder}}"
             ng-disabled="form.readonly"

test/directives/schema-form-test.js

@@ -779,7 +779,7 @@ describe('directive',function(){
       $rootScope.$apply();
 
       tmpl.children().length.should.be.equal(2);
-      tmpl.children().eq(0).children().eq(0).find('label').hasClass('ng-hide').should.be.true;
+      tmpl.children().eq(0).children().eq(0).find('label').hasClass('sr-only').should.be.true;
       tmpl.children().eq(1).children().eq(0).find('label').hasClass('ng-hide').should.be.true;
     });
   });