Screen reader labels for inline fields

mchapman · mchapman · commit 8a920d253c1c · 2014-05-19T11:51:36.000+01:00
diff --git a/app/js/directives/form.js b/app/js/directives/form.js
@@ -321,11 +321,13 @@ formsAngular
 
         var generateLabel = function (fieldInfo, addButtonMarkup, options) {
           var labelHTML = '';
-          if ((options.formstyle !== 'inline' && (fieldInfo.label !== '' || cssFrameworkService.framework() === 'bs3')) || addButtonMarkup) {
+          if ((cssFrameworkService.framework() === 'bs3' || (options.formstyle !== 'inline' && fieldInfo.label !== '')) || addButtonMarkup) {
             labelHTML = '<label';
             if (isHorizontalStyle(options.formstyle)) {
               labelHTML += ' for="' + fieldInfo.id + '"';
               if (cssFrameworkService.framework() === 'bs3') { labelHTML += addAll('Label', 'col-sm-2', options); }
+            } else if (options.formstyle === 'inline') {
+              labelHTML += ' for="' + fieldInfo.id + '" class="sr-only"';
             }
             labelHTML += addAll('Label', 'control-label', options);
             labelHTML += '>' + fieldInfo.label + (addButtonMarkup || '') + '</label>';
diff --git a/test/unit/formInputSpec.js b/test/unit/formInputSpec.js
@@ -695,4 +695,21 @@ describe('formInput', function () {
     });
   });
 
+  describe('labels in inline forms (BS2)', function () {
+
+    beforeEach(inject(function ($rootScope, $compile) {
+      elm = angular.element('<div><form-input formStyle="inline" schema="formSchema"></form-input></div>');
+      scope = $rootScope;
+      scope.formSchema = {name: 'desc', id: 'descId', label: 'Description', type: 'text'};
+      $compile(elm)(scope);
+      scope.$digest();
+    }));
+
+    it('should not have a label', function () {
+      var label = elm.find('label');
+      expect(label.length).toBe(0);
+    });
+
+  });
+
 });
