Merge 97f546f into 5e0e4d9

app/partials/wizardNav.html

@@ -1,7 +1,7 @@
 <nav class="nav-wizard" ng-if="showWizardNav()">
-    <ol>
-        <li ng-repeat="step in steps" class="step {{step.stepClass}}">
-            <span class="{{step.badgeClass}}">{{step.badgeText}}</span>
+    <ol role="progressbar" aria-valuemin="1" aria-valuemax="{{steps.length}}" aria-valuenow="{{currentStepIdx+1}}">
+        <li ng-repeat="step in steps" class="step {{step.stepClass}}" aria-hidden="{{!step.isSelectable()}}">
+            <span aria-label="Step {{$index+1}}" class="{{step.badgeClass}}">{{step.badgeText}}</span>
             <a class="step-title" ng-if="step.isSelectable()" ng-href="/#/{{step.view}}">{{step.title}}</a>
             <span class="step-title" ng-if="!step.isSelectable()">{{step.title}}</span>
         </li>

app/scripts/directives/wizardNav.js

@@ -72,6 +72,8 @@ module.exports = /*@ngInject*/ function($location, $timeout, StepFactory, Wizard
                 return ['/about', '/common-questions'].indexOf($location.path()) === -1;
             };
 
+            scope.currentStepIdx = Wizard.getCurrentStepIdx();
+
             // Watch the Wizard steps to see if they change
             scope.$watch(function() {
                 return Wizard.getCurrentStep();

app/scripts/services/wizard.js

@@ -50,6 +50,15 @@ module.exports = /*@ngInject*/ function(StepFactory) {
         return steps[currentStepIdx];
     };
 
+    /**
+     * Get the index of the current step
+     *
+     * @return {Number} current step index
+     */
+    this.getCurrentStepIdx = function() {
+        return currentStepIdx;
+    };
+
     /**
      * Sets the status of the current step to Complete and makes the next step active
      *

app/views/selectFile.html

@@ -6,7 +6,7 @@ <h2>Select File and Validate</h2>
     <div class="form-group-horizontal">
         <p class="note-required">* indicates required field</p>
 
-        <p ng-if="errors.global" class="page-errors">{{errors.global}}</p>
+        <p ng-if="errors.global" class="page-errors" role="alert">{{errors.global}}</p>
 
         <div class="form-group_item">
             <label for="year" class="form-label-header"><span class="form-label-required" role="presentation">*</span> Reporting year</label>

package.json

@@ -21,7 +21,7 @@
     "angular-route": "1.3.15",
     "angular-sanitize": "1.3.15",
     "hmda-rule-engine": "cfpb/hmda-rule-engine#milestone11",
-    "ng-dialog": "^0.3.12",
+    "ng-dialog": "^0.4.0",
     "normalize-css": "^2.3.1",
     "readable-blob-stream": "0.0.0"
   },

test/spec/directives/wizardNav.js

@@ -72,6 +72,13 @@ describe('Directive: WizardNav', function() {
         $timeout.flush(200);
     }));
 
+    it('should use an ARIA progressbar to denote progress through the wizard', function() {
+        expect(jQuery('ol', element).attr('role', 'progressbar')).toBeDefined();
+        expect(jQuery('ol', element).attr('aria-valuemin')).toBe('1');
+        expect(jQuery('ol', element).attr('aria-valuemax')).toBe('5');
+        expect(jQuery('ol', element).attr('aria-valuenow')).toBe('2');
+    });
+
     it('should display a link for the currently active step ', function() {
         expect(jQuery('li.active > a.title', element)).toBeDefined();
     });

test/spec/services/wizard.js

@@ -39,6 +39,13 @@ describe('Service: Wizard', function() {
         });
     });
 
+    describe('getCurrentStepIdx()', function() {
+
+        it('should return the index of the current step', function() {
+            expect(service.getCurrentStepIdx()).toBe(0);
+        });
+    });
+
     describe('getCurrentStep()', function() {
 
         it('should return the current step', function() {