fix(radio-group): wrong aria-checked value on load when used with ng-value (#9790)

Fixes #9400.

Author: crisbeto

src/components/radioButton/radio-button.js

@@ -62,7 +62,7 @@ function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming, $timeout) {
   function linkRadioGroup(scope, element, attr, ctrls) {
     element.addClass('_md');     // private md component indicator for styling
     $mdTheming(element);
-    
+
     var rgCtrl = ctrls[0];
     var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
 
@@ -205,8 +205,6 @@ function mdRadioGroupDirective($mdUtil, $mdConstant, $mdTheming, $timeout) {
 
       // Activate radioButton's click listener (triggerHandler won't create a real click event)
       angular.element(target).triggerHandler('click');
-
-
     }
   }
 
@@ -272,10 +270,18 @@ function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
     $mdTheming(element);
     configureAria(element, scope);
 
-    initialize();
+    // ngAria overwrites the aria-checked inside a $watch for ngValue.
+    // We should defer the initialization until all the watches have fired.
+    // This can also be fixed by removing the `lastChecked` check, but that'll
+    // cause more DOM manipulation on each digest.
+    if (attr.ngValue) {
+      $mdUtil.nextTick(initialize, false);
+    } else {
+      initialize();
+    }
 
     /**
-     *
+     * Initializes the component.
      */
     function initialize() {
       if (!rgCtrl) {
@@ -293,7 +299,7 @@ function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
     }
 
     /**
-     *
+     * On click functionality.
      */
     function listener(ev) {
       if (element[0].hasAttribute('disabled') || rgCtrl.isDisabled()) return;
@@ -308,58 +314,37 @@ function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
      *  Update the `aria-activedescendant` attribute.
      */
     function render() {
-      var checked = (rgCtrl.getViewValue() == attr.value);
-      if (checked === lastChecked) {
-        return;
-      }
+      var checked = rgCtrl.getViewValue() == attr.value;
 
-      lastChecked = checked;
-      element.attr('aria-checked', checked);
+      if (checked === lastChecked) return;
 
-      if (checked) {
-        markParentAsChecked(true);
-        element.addClass(CHECKED_CSS);
+      if (element[0].parentNode.nodeName.toLowerCase() !== 'md-radio-group') {
+        // If the radioButton is inside a div, then add class so highlighting will work
+        element.parent().toggleClass(CHECKED_CSS, checked);
+      }
 
+      if (checked) {
         rgCtrl.setActiveDescendant(element.attr('id'));
-
-      } else {
-        markParentAsChecked(false);
-        element.removeClass(CHECKED_CSS);
       }
 
-      /**
-       * If the radioButton is inside a div, then add class so highlighting will work...
-       */
-      function markParentAsChecked(addClass ) {
-        if ( element.parent()[0].nodeName != "MD-RADIO-GROUP") {
-          element.parent()[ !!addClass ? 'addClass' : 'removeClass'](CHECKED_CSS);
-        }
+      lastChecked = checked;
 
-      }
+      element
+        .attr('aria-checked', checked)
+        .toggleClass(CHECKED_CSS, checked);
     }
 
     /**
      * Inject ARIA-specific attributes appropriate for each radio button
      */
-    function configureAria( element, scope ){
-      scope.ariaId = buildAriaID();
-
+    function configureAria(element, scope){
       element.attr({
-        'id' :  scope.ariaId,
-        'role' : 'radio',
-        'aria-checked' : 'false'
+        id: attr.id || 'radio_' + $mdUtil.nextUid(),
+        role: 'radio',
+        'aria-checked': 'false'
       });
 
       $mdAria.expectWithText(element, 'aria-label');
-
-      /**
-       * Build a unique ID for each radio button that will be used with aria-activedescendant.
-       * Preserve existing ID if already specified.
-       * @returns {*|string}
-       */
-      function buildAriaID() {
-        return attr.id || ( 'radio' + "_" + $mdUtil.nextUid() );
-      }
     }
   }
 }

src/components/radioButton/radio-button.spec.js

@@ -2,7 +2,7 @@ describe('mdRadioButton component', function() {
 
   var CHECKED_CSS = 'md-checked';
 
-  beforeEach(module('material.components.radioButton'));
+  beforeEach(module('material.components.radioButton', 'ngAria'));
 
   describe('md-radio-group', function() {
 
@@ -209,6 +209,27 @@ describe('mdRadioButton component', function() {
       expect(element[0]).toHaveClass('md-focused');
     }));
 
+    it('should apply aria-checked properly when using ng-value', inject(function($compile, $rootScope, $timeout) {
+      $rootScope.color = 'blue';
+
+      var element = $compile(
+        '<md-radio-group ng-model="color">' +
+          '<md-radio-button ng-value="\'red\'"></md-radio-button>' +
+          '<md-radio-button ng-value="\'blue\'"></md-radio-button>' +
+          '<md-radio-button ng-value="\'green\'"></md-radio-button>' +
+        '</md-radio-group>')
+      ($rootScope);
+
+      $timeout.flush();
+
+      var checkedItems = element[0].querySelectorAll('[aria-checked="true"]');
+      var uncheckedItems = element[0].querySelectorAll('[aria-checked="false"]');
+
+      expect(checkedItems.length).toBe(1);
+      expect(uncheckedItems.length).toBe(2);
+      expect(checkedItems[0].getAttribute('value')).toBe($rootScope.color);
+    }));
+
   });
 
   describe('md-radio-button', function() {