fix(ngAria): update aria-valuemin/max when min/max change

As a result of thi fix, `ngMin/Max` also set `aria-valuemin/max` on
"range"-shaped elements.

Fixes angular#11770

Author: gkalpak

src/ngAria/aria.js

@@ -265,13 +265,23 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
                 elem.attr('role', 'slider');
               }
               if ($aria.config('ariaValue')) {
-                if (attr.min && !elem.attr('aria-valuemin')) {
-                  elem.attr('aria-valuemin', attr.min);
+                var needsAriaValuemin = !elem.attr('aria-valuemin') &&
+                    (attr.hasOwnProperty('min') || attr.hasOwnProperty('ngMin'));
+                var needsAriaValuemax = !elem.attr('aria-valuemax') &&
+                    (attr.hasOwnProperty('max') || attr.hasOwnProperty('ngMax'));
+                var needsAriaValuenow = !elem.attr('aria-valuenow');
+
+                if (needsAriaValuemin) {
+                  attr.$observe('min', function ngAriaValueMinReaction(newVal) {
+                    elem.attr('aria-valuemin', newVal);
+                  });
                 }
-                if (attr.max && !elem.attr('aria-valuemax')) {
-                  elem.attr('aria-valuemax', attr.max);
+                if (needsAriaValuemax) {
+                  attr.$observe('max', function ngAriaValueMinReaction(newVal) {
+                    elem.attr('aria-valuemax', newVal);
+                  });
                 }
-                if (!elem.attr('aria-valuenow')) {
+                if (needsAriaValuenow) {
                   scope.$watch(ngAriaWatchModelValue, function ngAriaValueNowReaction(newVal) {
                     elem.attr('aria-valuenow', newVal);
                   });

test/ngAria/ariaSpec.js

@@ -510,6 +510,34 @@ describe('$aria', function() {
       expectAriaAttrOnEachElement(element, 'aria-valuemin', 'userSetValue2');
       expectAriaAttrOnEachElement(element, 'aria-valuemax', 'userSetValue3');
     });
+
+    it('should update `aria-valuemin/max` when `min/max` changes dynamically', function() {
+      scope.$apply('min = 25; max = 75');
+      compileElement('<input type="range" ng-model="val" min="{{min}}" max="{{max}}" />');
+
+      expect(element.attr('aria-valuemin')).toBe('25');
+      expect(element.attr('aria-valuemax')).toBe('75');
+
+      scope.$apply('min = 0');
+      expect(element.attr('aria-valuemin')).toBe('0');
+
+      scope.$apply('max = 100');
+      expect(element.attr('aria-valuemax')).toBe('100');
+    });
+
+    it('should update `aria-valuemin/max` when using `ng-min/max`', function() {
+      scope.$apply('min = 25; max = 75');
+      compileElement('<input type="range" ng-model="val" ng-min="min" ng-max="max" />');
+
+      expect(element.attr('aria-valuemin')).toBe('25');
+      expect(element.attr('aria-valuemax')).toBe('75');
+
+      scope.$apply('min = 0');
+      expect(element.attr('aria-valuemin')).toBe('0');
+
+      scope.$apply('max = 100');
+      expect(element.attr('aria-valuemax')).toBe('100');
+    });
   });
 
   describe('announcing ngMessages', function() {