fix(ngAria): correctly set "checked" attr for checkboxes and radios

Make sure the checked attribute is set correctly for:
- checkboxes with string and integer models using ngTrueValue /
ngFalseValue
- radios with integer models
- radios with boolean models using ngValue

Fixes angular#10389
Fixes angular#10212

Author: Narretz

src/ngAria/aria.js

@@ -133,6 +133,7 @@ function $AriaProvider() {
    * @name $aria
    *
    * @description
+   * @priority 200
    *
    * The $aria service contains helper methods for applying common
    * [ARIA](http://www.w3.org/TR/wai-aria/) attributes to HTML directives.
@@ -216,6 +217,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
   return {
     restrict: 'A',
     require: '?ngModel',
+    priority: 200, //Make sure watches are fired after any other directives that affect the ngModel value
     link: function(scope, elem, attr, ngModel) {
       var shape = getShape(attr, elem);
       var needsTabIndex = shouldAttachAttr('tabindex', elem);
@@ -228,19 +230,19 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
         if (needsTabIndex) {
           needsTabIndex = false;
           return function ngAriaRadioReaction(newVal) {
-            var boolVal = newVal === attr.value;
+            var boolVal = (attr.value == ngModel.$viewValue);
             elem.attr('aria-checked', boolVal);
             elem.attr('tabindex', 0 - !boolVal);
           };
         } else {
           return function ngAriaRadioReaction(newVal) {
-            elem.attr('aria-checked', newVal === attr.value);
+            elem.attr('aria-checked', (attr.value == ngModel.$viewValue));
           };
         }
       }
 
       function ngAriaCheckboxReaction(newVal) {
-        elem.attr('aria-checked', !!newVal);
+        elem.attr('aria-checked', !ngModel.$isEmpty(ngModel.$viewValue));
       }
 
       switch (shape) {

test/ngAria/ariaSpec.js

@@ -85,6 +85,28 @@ describe('$aria', function() {
       expect(element.attr('aria-checked')).toBe('false');
     });
 
+    it('should handle checkbox with string model values using ng(True|False)Value', function() {
+      var element = $compile('<input type="checkbox" ng-model="val" ng-true-value="\'yes\'">' +
+        'ng-false-value="\'no\'"'
+      )(scope);
+
+      scope.$apply('val="yes"');
+      expect(element.eq(0).attr('aria-checked')).toBe('true');
+
+      scope.$apply('val="no"');
+      expect(element.eq(0).attr('aria-checked')).toBe('false');
+    });
+
+    it('should handle checkbox with integer model values using ngTrueValue', function() {
+      var element = $compile('<input type="checkbox" ng-model="val" ng-true-value="0">')(scope);
+
+      scope.$apply('val=0');
+      expect(element.eq(0).attr('aria-checked')).toBe('true');
+
+      scope.$apply('val=1');
+      expect(element.eq(0).attr('aria-checked')).toBe('false');
+    });
+
     it('should attach itself to input type="radio"', function() {
       var element = $compile('<input type="radio" ng-model="val" value="one">' +
           '<input type="radio" ng-model="val" value="two">')(scope);
@@ -98,6 +120,36 @@ describe('$aria', function() {
       expect(element.eq(1).attr('aria-checked')).toBe('true');
     });
 
+    it('should handle radios with integer model values', function() {
+      var element = $compile('<input type="radio" ng-model="val" value="0">' +
+          '<input type="radio" ng-model="val" value="1">')(scope);
+
+      scope.$apply('val=0');
+      expect(element.eq(0).attr('aria-checked')).toBe('true');
+      expect(element.eq(1).attr('aria-checked')).toBe('false');
+
+      scope.$apply('val=1');
+      expect(element.eq(0).attr('aria-checked')).toBe('false');
+      expect(element.eq(1).attr('aria-checked')).toBe('true');
+    });
+
+    it('should handle radios with boolean model values using ngValue', function() {
+      var element = $compile('<input type="radio" ng-model="val" ng-value="valExp">' +
+          '<input type="radio" ng-model="val" ng-value="valExp2">')(scope);
+
+      scope.$apply(function() {
+        scope.valExp = true;
+        scope.valExp2 = false;
+        scope.val = true;
+      });
+      expect(element.eq(0).attr('aria-checked')).toBe('true');
+      expect(element.eq(1).attr('aria-checked')).toBe('false');
+
+      scope.$apply('val = false');
+      expect(element.eq(0).attr('aria-checked')).toBe('false');
+      expect(element.eq(1).attr('aria-checked')).toBe('true');
+    });
+
     it('should attach itself to role="radio"', function() {
       scope.$apply("val = 'one'");
       compileInput('<div role="radio" ng-model="val" value="{{val}}"></div>');