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 #11770 Closes #11774
angular · Jun 3, 2015 · ebaa0f5 · ebaa0f5
1 parent bb15d41
commit ebaa0f5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/src/ngAria/aria.js b/src/ngAria/aria.js
@@ -264,13 +264,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);
                   });

diff --git a/test/ngAria/ariaSpec.js b/test/ngAria/ariaSpec.js
@@ -549,6 +549,36 @@ 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 `ng-min/ng-max` changes dynamically', 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() {