Merge pull request #336 from huerlisi/fixes/utilization-bar-arianow

Improve aria support in utilization bar chart

Author: dtaylor113

src/charts/utilization-bar/utilization-bar-chart.html

@@ -2,14 +2,14 @@
   <span ng-if="!layout || layout.type === 'regular'">
     <div ng-if="chartTitle" class="progress-description">{{chartTitle}}</div>
     <div class="progress progress-label-top-right" ng-if="chartData.dataAvailable !== false">
-      <div class="progress-bar" role="progressbar" ng-class="{'animate': animate,
+      <div class="progress-bar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100" ng-class="{'animate': animate,
            'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
            ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used" >
         <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
         <span ng-if="!chartFooter && (!footerLabelFormat || footerLabelFormat === 'actual')"><strong>{{chartData.used}} of {{chartData.total}} {{units}}</strong> Used</span>
         <span ng-if="!chartFooter && footerLabelFormat === 'percent'"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
       </div>
-      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"
+      <div class="progress-bar progress-bar-remaining"
            ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
       </div>
     </div>
@@ -19,14 +19,14 @@
          ng-style="{'padding-left':layout.titleLabelWidth, 'padding-right':layout.footerLabelWidth}">
       <div ng-if="chartTitle" class="progress-description"  ng-style="{'max-width':layout.titleLabelWidth}">{{chartTitle}}</div>
       <div class="progress" ng-if="chartData.dataAvailable !== false">
-        <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
+        <div class="progress-bar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100"
              ng-class="{'animate': animate, 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
              ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used">
           <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
           <span ng-if="(!chartFooter) && (!footerLabelFormat || footerLabelFormat === 'actual')" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.used}} {{units}}</strong> Used</span>
           <span ng-if="(!chartFooter) && footerLabelFormat === 'percent'" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
         </div>
-        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
+        <div class="progress-bar progress-bar-remaining"
              ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
         </div>
       </div>

test/charts/utilization-bar/utilization-bar.spec.js

@@ -17,7 +17,7 @@ describe('Directive: pfUtilizationBarChart', function() {
 
     $scope.data = {
       'used': '8',
-      'total': '16'
+      'total': '10'
     };
 
     $scope.title = 'CPU Usage';
@@ -33,22 +33,27 @@ describe('Directive: pfUtilizationBarChart', function() {
     return el;
   };
 
-  it("should set the width of the inner bar to be 50%", function() {
+  it("should set the width of the inner bar to be 80%", function() {
     utilizationBar = angular.element(element).find('.progress-bar').css('width');
-    expect(utilizationBar).toBe("50%");
+    expect(utilizationBar).toBe("80%");
+  });
+
+  it("should set aria-valuenow values", function() {
+    used = angular.element(element).find('.progress-bar').not('.progress-bar-remaining');
+    expect(used.attr('aria-valuenow')).toBe("80");
   });
 
   it("should set the charts title and usage label", function() {
     title = angular.element(element).find('.progress-description').html();
     expect(title).toBe("CPU Usage");
 
     subTitle = angular.element(element).find('.progress-bar span').text();
-    expect(subTitle).toBe("8 of 16 GB Used");
+    expect(subTitle).toBe("8 of 10 GB Used");
 
     //test 'percent' used-label-format
     element = compileChart("<div pf-utilization-bar-chart chart-data=data footer-label-format='percent' chart-title=title units=units></div>", $scope);
     subTitle = angular.element(element).find('.progress-bar span').text();
-    expect(subTitle).toBe("50% Used");
+    expect(subTitle).toBe("80% Used");
   });
 
   it("should set the layout to be 'inline', and use custom widths", function() {