diff --git a/src/progressbar/progressbar.js b/src/progressbar/progressbar.js index 70b72594eb..5a1953bb89 100644 --- a/src/progressbar/progressbar.js +++ b/src/progressbar/progressbar.js @@ -10,39 +10,28 @@ angular.module('ui.bootstrap.progressbar', []) animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate; this.bars = []; - this.max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : progressConfig.max; + $scope.max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : progressConfig.max; this.addBar = function(bar, element) { - bar.$element = element; - if ( !animate ) { - bar.$element.css({'transition': 'none'}); + element.css({'transition': 'none'}); } this.bars.push(bar); - bar.$watch('value', function() { - self.update( bar ); + bar.$watch('value', function( value ) { + bar.percent = Math.round(100 * value / $scope.max); }); bar.$on('$destroy', function() { - bar.$element = null; + element = null; self.removeBar(bar); }); }; - this.update = function( bar ) { - var percent = this.getPercentage( bar.value ); - bar.$element.css({ 'width': percent + '%' }); - }; - this.removeBar = function(bar) { this.bars.splice(this.bars.indexOf(bar), 1); }; - - this.getPercentage = function(value) { - return Math.round(100 * value / this.max); - }; }]) .directive('progress', function() { diff --git a/src/progressbar/test/progressbar.spec.js b/src/progressbar/test/progressbar.spec.js index a977ab25de..dd6d994fd4 100644 --- a/src/progressbar/test/progressbar.spec.js +++ b/src/progressbar/test/progressbar.spec.js @@ -29,6 +29,15 @@ describe('progressbar directive', function () { expect(getBar(0).css('width')).toBe('22%'); }); + it('has the appropriate aria markup', function() { + var bar = getBar(0); + expect(bar.attr('role')).toBe('progressbar'); + expect(bar.attr('aria-valuemin')).toBe('0'); + expect(bar.attr('aria-valuemax')).toBe('100'); + expect(bar.attr('aria-valuenow')).toBe('22'); + expect(bar.attr('aria-valuetext')).toBe('22%'); + }); + it('transcludes "bar" text', function() { expect(getBar(0).text()).toBe('22 %'); }); @@ -43,6 +52,19 @@ describe('progressbar directive', function () { expect(getBar(0)).toHaveClass('pizza'); }); + it('adjusts the "bar" width and aria when value changes', function() { + $rootScope.value = 60; + $rootScope.$digest(); + + var bar = getBar(0); + expect(bar.css('width')).toBe('60%'); + + expect(bar.attr('aria-valuemin')).toBe('0'); + expect(bar.attr('aria-valuemax')).toBe('100'); + expect(bar.attr('aria-valuenow')).toBe('60'); + expect(bar.attr('aria-valuetext')).toBe('60%'); + }); + describe('"max" attribute', function () { beforeEach(inject(function() { $rootScope.max = 200; @@ -50,6 +72,10 @@ describe('progressbar directive', function () { $rootScope.$digest(); })); + it('has the appropriate aria markup', function() { + expect(getBar(0).attr('aria-valuemax')).toBe('200'); + }); + it('adjusts the "bar" width', function() { expect(element.children().eq(0).css('width')).toBe('11%'); }); diff --git a/template/progressbar/bar.html b/template/progressbar/bar.html index c0cf38c1cc..dc347e8f73 100644 --- a/template/progressbar/bar.html +++ b/template/progressbar/bar.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/template/progressbar/progressbar.html b/template/progressbar/progressbar.html index 2a0d0229b2..fade0de2b9 100644 --- a/template/progressbar/progressbar.html +++ b/template/progressbar/progressbar.html @@ -1 +1,3 @@ -
\ No newline at end of file +
+
+
\ No newline at end of file