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

Narretz · Narretz · commit d6eba21733c6 · 2015-02-10T22:30:13.000+01:00
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
diff --git a/src/ngAria/aria.js b/src/ngAria/aria.js
@@ -129,6 +129,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.
@@ -205,6 +206,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', 'tabindex', elem);
@@ -217,19 +219,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) {
diff --git a/test/ngAria/ariaSpec.js b/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>');
