feat(progressbar): make widget accessible

 * Add WAI-ARIA markup.

Closes #1717

Author: bekos

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() {

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,13 +52,30 @@ 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;
       element = $compile('<progressbar max="max" animate="false" value="value">{{value}}/{{max}}</progressbar>')($rootScope);
       $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%');
     });

template/progressbar/bar.html

@@ -1 +1 @@
-<div class="progress-bar" ng-class="type && 'progress-bar-' + type" ng-transclude></div>
+<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: percent + '%'}" aria-valuetext="{{percent}}%" ng-transclude></div>

template/progressbar/progressbar.html

@@ -1 +1,3 @@
-<div class="progress"><div class="progress-bar" ng-class="type && 'progress-bar-' + type" ng-transclude></div></div>
+<div class="progress">
+  <div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: percent + '%'}" aria-valuetext="{{percent}}%" ng-transclude></div>
+</div>