fix(a11y): remove aria-required attribute

src/modules/ngFormLib/controls/common/FormControlService.js

@@ -276,7 +276,6 @@ mod.provider('formControlService', function Provider() {
         }
 
         inputElem.attr('ng-required', required);
-        inputElem.attr('aria-required', '{{!!(' + required + ')}}');  // evaluates to true / false
         return inputElem;
       },
 

src/modules/ngFormLib/controls/common/docs/formControlsCommonProperties.docs.html

@@ -24,7 +24,7 @@
   <td>required</td>
   <td>expression</td>
   <td>false</td>
-  <td>An expression that determines the value of <code>ng-required</code>, <code>aria-required</code> and the required indicator on the <code>&lt;label&gt;</code></td>
+  <td>An expression that determines the value of <code>ng-required</code> and the required indicator on the <code>&lt;label&gt;</code></td>
 </tr>
 <tr>
   <td>hide-required-indicator</td>

src/modules/ngFormLib/controls/common/unitTest/FormControlsService.spec.js

@@ -111,7 +111,7 @@ describe('Form controls common library', function() {
 
       formControlService.decorateInputField(elem, hostElem, attr, 'myId', 'myName', 'state === \'VIC\'');
 
-      expect(elem[0].outerHTML).toEqual('<input id="myId" name="myName" ng-required="state === \'VIC\'" aria-required="{{!!(state === \'VIC\')}}">');
+      expect(elem[0].outerHTML).toEqual('<input id="myId" name="myName" ng-required="state === \'VIC\'">');
       expect(hostElem[0].outerHTML).toEqual('<div no-ff-attributes="ok" so-nothing-will-be-copied-from-here="cool"></div>');
     });
 
@@ -128,7 +128,7 @@ describe('Form controls common library', function() {
 
       formControlService.decorateInputField(elem, hostElem, attr, 'myId', 'myName', 'true');
 
-      expect(elem[0].outerHTML).toEqual('<input class="inline" id="myId" name="myName" ng-pattern="[0-9]{4}" ng-required="true" aria-required="{{!!(true)}}">');
+      expect(elem[0].outerHTML).toEqual('<input class="inline" id="myId" name="myName" ng-pattern="[0-9]{4}" ng-required="true">');
       expect(hostElem[0].outerHTML).toEqual('<div class="row"></div>');
     });
   });

src/modules/ngFormLib/controls/formCheckbox/unitTest/FormCheckbox.spec.js

@@ -23,7 +23,7 @@ describe('when I use the Form Checkbox button it', function() {
   it('should create a checkbox with the minimum markup', function() {
     elem = compileElement('<form-checkbox uid="fld" name="btn">My label</form-checkbox>');
 
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="checkbox" field-error-controller="" id="fld" name="btn" ng-required="false" aria-required="false">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="checkbox" field-error-controller="" id="fld" name="btn" ng-required="false">');
     expect(elem.find('label')[0].outerHTML).toEqual('<label for="fld"><span ng-transclude=""><span class="ng-scope">My label</span></span><span class="required ng-isolate-scope ng-hide" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="!(false)"></span></label>');
   });
 
@@ -33,7 +33,7 @@ describe('when I use the Form Checkbox button it', function() {
 
     // Little bit weird: The checkbox has a ng-checked=true initial state, but the model value 'state' does not exist! So the field looks checked, but it is invalid!
     // In practice, ng-checked should be an expression, or even better, just put a value into the model.
-    expect(elem.find('input')[0].outerHTML).toMatch('<input type="checkbox" field-error-controller="" id="fld" name="btn" ng-model="state" ng-checked="true" aria-label="My label" ng-change="testChange()" ng-required="true" aria-required="true" ng-class="{\'checked\': state === true || true}" class=".*" required="required" checked="checked">');
+    expect(elem.find('input')[0].outerHTML).toMatch('<input type="checkbox" field-error-controller="" id="fld" name="btn" ng-model="state" ng-checked="true" aria-label="My label" ng-change="testChange()" ng-required="true" ng-class="{\'checked\': state === true || true}" class=".*" required="required" checked="checked">');
     // expect(elem.find('label')[0].outerHTML).toEqual('<label for="fld" class="Amy checked" ng-class="{\'checked\': state === \'undefined\' || true}"><span ng-transclude=""></span><span class="required ng-isolate-scope" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" hide="!(true)"></span></label>');
   });
 });

src/modules/ngFormLib/controls/formDate/unitTest/FormDateInput.spec.js

@@ -140,7 +140,7 @@ describe('Date Directives spec,', function() {
 
       expect(elem.html()).toMatch('<div class="form-group">' +
         '<label class="control-label" for="frm-date">frm-date<span class="required ng-isolate-scope ng-hide" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="\\!\\(false\\)"></span></label>' +
-        '<div class="control-row"><input type="text" class=".*" maxlength="10" placeholder="dd/mm/yyyy" bs-datepicker="" form-date-format="" mask-date-digits="" id="frm-date" name="frm-date" ng-model="scope.date" ng-required="false" aria-required="false"><span ng-transclude=""></span></div>' +
+        '<div class="control-row"><input type="text" class=".*" maxlength="10" placeholder="dd/mm/yyyy" bs-datepicker="" form-date-format="" mask-date-digits="" id="frm-date" name="frm-date" ng-model="scope.date" ng-required="false"><span ng-transclude=""></span></div>' +
         '</div>');
     });
 

src/modules/ngFormLib/controls/formInput/unitTest/FormInput.spec.js

@@ -27,7 +27,7 @@ describe('Form Input Directive', function() {
 
     expect(elem.html()).toEqual('<div class="form-group"><label class="control-label" for="fld">hi<span class="required ng-isolate-scope ng-hide" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="!(false)"></span></label>' +
                     '<div class="control-row">' +
-                    '<input type="text" class="form-control" id="fld" name="fldName" ng-required="false" aria-required="false">' +
+                    '<input type="text" class="form-control" id="fld" name="fldName" ng-required="false">' +
                     '<span ng-transclude=""></span></div></div>');
   });
 
@@ -40,22 +40,22 @@ describe('Form Input Directive', function() {
 
     // Initialy the required marker is not showing and the input is not required
     expect(elem.find('label')[0].outerHTML).toEqual('<label class="control-label" for="fld">hi<span class="required ng-isolate-scope ng-hide" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="!(some.value)"></span></label>');
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fldName" ng-required="some.value" aria-required="false">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fldName" ng-required="some.value">');
 
     scope.some.value = 'something';
     scope.$digest();
 
     // The required marker is now showing and the input field has a required attribute
     expect(elem.find('label')[0].outerHTML).toEqual('<label class="control-label" for="fld">hi<span class="required ng-isolate-scope" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="!(some.value)"></span></label>');
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fldName" ng-required="some.value" aria-required="true" required="required">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fldName" ng-required="some.value" required="required">');
 
     // Now change it falsy again
     scope.some.value = 0;
     scope.$digest();
 
     // The required marker is hidden again and the input field no longer has a required attribute
     expect(elem.find('label')[0].outerHTML).toEqual('<label class="control-label" for="fld">hi<span class="required ng-isolate-scope ng-hide" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="!(some.value)"></span></label>');
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fldName" ng-required="some.value" aria-required="false">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fldName" ng-required="some.value">');
   });
 
 
@@ -67,13 +67,13 @@ describe('Form Input Directive', function() {
 
   it('should create a form input element and apply all ff- prefixed attributes to the <input element (except for the type attribute, which is read-only and must come from the template)', function() {
     elem = compileElement('<form-input uid="fld" name="name" label="Some field" input-type="text" ff-a="1" ff-b="true" ff-maxlength="8" ff-class="newClass">');
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control newClass" id="fld" name="name" a="1" b="true" maxlength="8" ng-required="false" aria-required="false">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control newClass" id="fld" name="name" a="1" b="true" maxlength="8" ng-required="false">');
   });
 
 
   it('should allow the placeholder attribute to be specified as "placeholder"', function() {
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" placeholder="direct">');
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false" placeholder="direct">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fld" ng-required="false" placeholder="direct">');
   });
 
 
@@ -86,34 +86,34 @@ describe('Form Input Directive', function() {
   it('should allow the placeholder attribute to be specified as "ff-placeholder" too', function() {
     // Now use ff-placeholder
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" ff-placeholder="indirect">');
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fld" placeholder="indirect" ng-required="false" aria-required="false">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="text" class="form-control" id="fld" name="fld" placeholder="indirect" ng-required="false">');
   });
 
   it('should support input-prefix to add a Bootstrap input group addon before the field', function() {
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" input-prefix="AUD">');
-    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-addon">AUD</span><input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false"></div>');
+    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-addon">AUD</span><input type="text" class="form-control" id="fld" name="fld" ng-required="false"></div>');
   });
 
   it('should support input-suffix to add a Bootstrap input group addon after the field', function() {
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" input-suffix="per hour">');
-    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false"><span class="input-group-addon">per hour</span></div>');
+    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><input type="text" class="form-control" id="fld" name="fld" ng-required="false"><span class="input-group-addon">per hour</span></div>');
   });
 
   it('should support both input-prefix and input-suffix to add a Bootstrap input group addons before and after the field', function() {
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" input-prefix="$" input-suffix="per hour">');
-    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-addon">$</span><input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false"><span class="input-group-addon">per hour</span></div>');
+    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-addon">$</span><input type="text" class="form-control" id="fld" name="fld" ng-required="false"><span class="input-group-addon">per hour</span></div>');
   });
 
 
   it('should support input-button-prefix to add a Bootstrap input group button addon before the field, without a click handler', function() {
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" input-button-prefix="Open">');
-    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default">Open</button></span><input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false"></div>');
+    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default">Open</button></span><input type="text" class="form-control" id="fld" name="fld" ng-required="false"></div>');
   });
 
   it('should support input-button-prefix to add a Bootstrap input group button addon before the field, with a click handler', function() {
     scope.foo = jasmine.createSpy('foo');
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" input-button-prefix="Open" input-button-prefix-click="foo()">');
-    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="foo()">Open</button></span><input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false"></div>');
+    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="foo()">Open</button></span><input type="text" class="form-control" id="fld" name="fld" ng-required="false"></div>');
 
     expect(scope.foo).not.toHaveBeenCalled();
     elem.find('button').triggerHandler('click');
@@ -123,14 +123,14 @@ describe('Form Input Directive', function() {
 
   it('should support input-button-suffix to add a Bootstrap input group button addon after the field, without a click handler', function() {
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" input-button-suffix="Close">');
-    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false"><span class="input-group-btn"><button type="button" class="btn btn-default">Close</button></span></div>');
+    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><input type="text" class="form-control" id="fld" name="fld" ng-required="false"><span class="input-group-btn"><button type="button" class="btn btn-default">Close</button></span></div>');
   });
 
   it('should support input-button-prefix and input-button-suffix with a click handlers', function() {
     scope.foo = jasmine.createSpy('foo');
     scope.bar = jasmine.createSpy('bar');
     elem = compileElement('<form-input uid="fld" input-type="text" label="label" input-button-prefix="Open" input-button-prefix-click="foo()" input-button-suffix="Close" input-button-suffix-click="bar()">');
-    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="foo()">Open</button></span><input type="text" class="form-control" id="fld" name="fld" ng-required="false" aria-required="false"><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="bar()">Close</button></span></div>');
+    expect(elem.find('input').parent()[0].outerHTML).toEqual('<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="foo()">Open</button></span><input type="text" class="form-control" id="fld" name="fld" ng-required="false"><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="bar()">Close</button></span></div>');
 
     expect(scope.foo).not.toHaveBeenCalled();
     expect(scope.bar).not.toHaveBeenCalled();
@@ -176,7 +176,7 @@ describe('Form Input Directive', function() {
 
   //   // Error block is produced, but is initially hidden
   //   expect(elem.find('div').eq(2).html()).toEqual('<span class="sr-only" aria-hidden="true" id="frm-fldName-errors-aria"></span>');
-  //   expect(elem.find('input')[0].outerHTML).toEqual('<input id="fld" name="fldName" type="text" ng-model="cust.name" ng-required="true" aria-required="true" field-error-controller="" class="ng-pristine ng-invalid ng-invalid-required" aria-invalid="false" required="required">');
+  //   expect(elem.find('input')[0].outerHTML).toEqual('<input id="fld" name="fldName" type="text" ng-model="cust.name" ng-required="true" field-error-controller="" class="ng-pristine ng-invalid ng-invalid-required" aria-invalid="false" required="required">');
 
 
   //   // Submit the form, then the error should appear

src/modules/ngFormLib/controls/formRadioButton/unitTest/FormRadioButton.spec.js

@@ -25,15 +25,15 @@ describe('when I use the Form Radio Button it', function() {
     elem = compileElement('<form-radio-button uid="fld" name="btn">My label</form-radio-button>');
 
     // Added form directive bits HTML changes initially
-    expect(elem.find('input')[0].outerHTML).toEqual('<input type="radio" field-error-controller="" id="fld" name="btn" ng-required="false" aria-required="false">');
+    expect(elem.find('input')[0].outerHTML).toEqual('<input type="radio" field-error-controller="" id="fld" name="btn" ng-required="false">');
     expect(elem.find('label')[0].outerHTML).toEqual('<label for="fld"><span ng-transclude=""><span class="ng-scope">My label</span></span><span class="required ng-isolate-scope ng-hide" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="!(false)"></span></label>');
   });
 
 
   it('should create a radio button with a uid + name + change() + required', function() {
     elem = compileElement('<form-radio-button uid="fld" name="btn" ff-ng-model="state" ff-ng-checked="true" ff-value="puppy" label-class="Amy" ff-aria-label="My label" ff-ng-change="testChange()" required="true"></form-radio-button>');
 
-    expect(elem.find('input')[0].outerHTML).toMatch('<input type="radio" field-error-controller="" id="fld" name="btn" ng-model="state" ng-checked="true" value="puppy" aria-label="My label" ng-change="testChange()" ng-required="true" aria-required="true" ng-class="{\'checked\': state === \'puppy\' || true}" class=".*" required="required" checked="checked">');
+    expect(elem.find('input')[0].outerHTML).toMatch('<input type="radio" field-error-controller="" id="fld" name="btn" ng-model="state" ng-checked="true" value="puppy" aria-label="My label" ng-change="testChange()" ng-required="true" ng-class="{\'checked\': state === \'puppy\' || true}" class=".*" required="required" checked="checked">');
     expect(elem.find('label')[0].outerHTML).toEqual('<label for="fld" class="Amy"><span ng-transclude=""></span><span class="required ng-isolate-scope" aria-hidden="true" ng-class="{\'ng-hide\': hide}" ng-transclude="" required-marker="" hide="!(true)"></span></label>');
   });
 });

src/modules/ngFormLib/controls/formSelect/unitTest/FormSelect.spec.js

@@ -24,7 +24,7 @@ describe('Form Select directive', function() {
   it('should create a select dropdown with the minimum markup', function() {
     elem = compileElement('<form-select label="sel" uid="sel" name="select"></form-select>');
 
-    expect(elem.find('select')[0].outerHTML).toEqual('<select class="form-control" id="sel" name="select" ng-required="false" aria-required="false"></select>');
+    expect(elem.find('select')[0].outerHTML).toEqual('<select class="form-control" id="sel" name="select" ng-required="false"></select>');
     expect(elem.find('select').length).toEqual(1);
   });