Merge pull request #307 from poorgeek/ui-defects

UI defects
cfpb · Mar 20, 2015 · c79a612 · c79a612
2 parents 5469ee7 + 5732c31
commit c79a612
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 27 deletions.
diff --git a/app/scripts/controllers/errorDetail.js b/app/scripts/controllers/errorDetail.js
@@ -52,8 +52,8 @@ module.exports = /*@ngInject*/ function ($scope, $routeParams, $location, $http,
         }
     };
 
-    $scope.goToEditDetail = function() {
-        $location.path('/detail/' + editType + '/' + $scope.selectedEditId);
+    $scope.goToEditDetail = function(editId) {
+        $location.path('/detail/' + editType + '/' + editId);
     };
 
     $scope.saveQualityVerification = function() {

diff --git a/app/scripts/controllers/irsReport.js b/app/scripts/controllers/irsReport.js
@@ -10,14 +10,20 @@
 module.exports = /*@ngInject*/ function ($scope, $location, $q, HMDAEngine, Session) {
 
     var LARs = HMDAEngine.getHmdaJson().hmdaFile.loanApplicationRegisters;
+
+    /* istanbul ignore if debug */
     if (HMDAEngine.getDebug()) {
         console.time('total time for IRS report');
     }
+
     // Initialize scope
     HMDAEngine.getTotalsByMSA(LARs).then(function(response) {
+
+        /* istanbul ignore if debug */
         if (HMDAEngine.getDebug()) {
             console.timeEnd('total time for IRS report');
         }
+
         $scope.error = {
             errors: response
         };

diff --git a/app/scripts/controllers/pagination.js b/app/scripts/controllers/pagination.js
@@ -7,12 +7,18 @@
  * # PaginationCtrl
  * Controller for pagination
  */
-module.exports = /*@ngInject*/ function ($scope) {
+module.exports = /*@ngInject*/ function ($scope, $element, $timeout) {
     $scope.paginate = {
         currentPage: 1,
         pageSize: 10
     };
 
+    var $table = null;
+    $timeout(function() {
+        $table = $element.find('table');
+        $table.attr('tabindex', '-1');
+    }, 200);
+
     $scope.$watch(function() {
         return $scope.isLastPage();
     }, function(isLastPage) {
@@ -76,6 +82,7 @@ module.exports = /*@ngInject*/ function ($scope) {
 
     $scope.onPrev = function() {
         $scope.paginate.currentPage--;
+        $table[0].focus();
     };
 
     $scope.hasNext = function() {
@@ -84,6 +91,7 @@ module.exports = /*@ngInject*/ function ($scope) {
 
     $scope.onNext = function() {
         $scope.paginate.currentPage++;
+        $table[0].focus();
     };
 
     $scope.isLastPage = function() {

diff --git a/app/scripts/controllers/selectFile.js b/app/scripts/controllers/selectFile.js
@@ -54,10 +54,13 @@ module.exports = /*@ngInject*/ function ($scope, $location, $q, $timeout, FileRe
 
     $scope.process = function(hmdaData) {
         HMDAEngine.setUseLocalDB(hmdaData.local);
-        // Convert the file to JSON
+
+        /* istanbul ignore if debug */
         if (HMDAEngine.getDebug()) {
             console.time('time to process hmda json');
         }
+
+        // Convert the file to JSON
         HMDAEngine.fileToJson(hmdaData.file, hmdaData.year, function(fileErr) {
             if (fileErr) {
                 // Toggle processing flag off
@@ -67,12 +70,17 @@ module.exports = /*@ngInject*/ function ($scope, $location, $q, $timeout, FileRe
                 $scope.$apply();
                 return;
             }
+
+            /* istanbul ignore if debug */
             if (HMDAEngine.getDebug()) {
                 console.timeEnd('time to process hmda json');
                 console.time('total time for syntactical and validity edits');
             }
+
             $q.all([HMDAEngine.runSyntactical(hmdaData.year), HMDAEngine.runValidity(hmdaData.year)])
             .then(function() {
+
+                /* istanbul ignore if debug */
                 if (HMDAEngine.getDebug()) {
                     console.timeEnd('total time for syntactical and validity edits');
                 }

diff --git a/app/scripts/controllers/summaryQualityMacro.js b/app/scripts/controllers/summaryQualityMacro.js
@@ -64,13 +64,19 @@ module.exports = /*@ngInject*/ function ($scope, $location, $q, $timeout, HMDAEn
     $scope.process = function() {
         // Run the second set of validations
         var ruleYear = HMDAEngine.getRuleYear();
+
+        /* istanbul ignore if debug */
         if (HMDAEngine.getDebug()) {
             console.time('total time for special edits');
         }
+
         $q.all([HMDAEngine.runSpecial(ruleYear)]).then(function() {
+
+            /* istanbul ignore if debug */
             if (HMDAEngine.getDebug()) {
                 console.timeEnd('total time for special edits');
             }
+
             // Complete the current step in the wizard
             $scope.wizardSteps = Wizard.completeStep();
 

diff --git a/app/scripts/controllers/summarySyntacticalValidity.js b/app/scripts/controllers/summarySyntacticalValidity.js
@@ -52,14 +52,20 @@ module.exports = /*@ngInject*/ function ($scope, $location, $q, $timeout, HMDAEn
     $scope.process = function() {
         // Run the second set of validations
         var ruleYear = HMDAEngine.getRuleYear();
+
+        /* istanbul ignore if debug */
         if (HMDAEngine.getDebug()) {
             console.time('total time for quality and macro edits');
         }
+
         $q.all([HMDAEngine.runQuality(ruleYear), HMDAEngine.runMacro(ruleYear)])
         .then(function() {
+
+            /* istanbul ignore if debug */
             if (HMDAEngine.getDebug()) {
                 console.timeEnd('total time for quality and macro edits');
             }
+
             // Complete the current step in the wizard
             $scope.wizardSteps = Wizard.completeStep();
 

diff --git a/app/scripts/directives/wizardNav.js b/app/scripts/directives/wizardNav.js
@@ -7,7 +7,7 @@
  * # Wizard Nav directive
  * Directive for displaying the wizard navigation.
  */
-module.exports = /*@ngInject*/ function ($location, StepFactory, Wizard, ngDialog) {
+module.exports = /*@ngInject*/ function ($location, $timeout, StepFactory, Wizard, ngDialog) {
 
     function getStepClass(step) {
         if (step.isActive) {
@@ -58,7 +58,7 @@ module.exports = /*@ngInject*/ function ($location, StepFactory, Wizard, ngDialo
         scope: {
             steps: '='
         },
-        link: function(scope) {
+        link: function(scope, element) {
             // Initialize scope variables
             scope.steps = [];
 
@@ -74,6 +74,17 @@ module.exports = /*@ngInject*/ function ($location, StepFactory, Wizard, ngDialo
                 }
 
                 scope.steps = newSteps;
+
+                $timeout(function() { // Wrap the events in a timeout to give the partial time to render :(
+                    element.find('a').on('focus', function(event) {
+                        angular.element(event.target).parent().addClass('is_focused');
+                    });
+
+                    element.find('a').on('blur', function(event) {
+                        angular.element(event.target).parent().removeClass('is_focused');
+                    });
+                }, 100);
+
             });
 
             scope.$on('$routeChangeSuccess', function (event, current, previous) {

diff --git a/app/styles/hmda-pilot.less b/app/styles/hmda-pilot.less
@@ -197,6 +197,7 @@ h2 label { display: inline; }
 table {
     width: 100%;
     margin-bottom: 20px;
+    outline: 0;
 
     a { .u-link__colors(@pacific); }
 

diff --git a/app/styles/wizard.less b/app/styles/wizard.less
@@ -25,17 +25,6 @@
             list-style: none;
 
             // Wizard states
-            &.error {
-                @a11y-color: tint(@redorange, 90%);
-
-                border-color: @redorange;
-                background-color: @a11y-color;
-
-                .step-badge {
-                    color: @a11y-color;
-                    background-color: @redorange;
-                }
-            }
             &.complete {
                 @a11y-color: shade(@green, 27%);
 
@@ -56,9 +45,7 @@
                     background-color: @darkgray;
                 }
             }
-            &.active,
-            &.focusable:hover,
-            &.focusable:focus {
+            &.active {
                 @a11y-color: tint(@teal, 8%);
 
                 border-color: @a11y-color;
@@ -69,6 +56,19 @@
                     background-color: @a11y-color;
                 }
             }
+            &.focusable:hover,
+            &.focusable:focus,
+            &.is_focused {
+                @a11y-color: tint(@gold, 90%);
+
+                border-color: @gold;
+                background-color: @a11y-color;
+
+                .step-badge {
+                    color: @a11y-color;
+                    background-color: @gold;
+                }
+            }
 
             a { outline: 0; }
 

diff --git a/app/views/errorDetail.html b/app/views/errorDetail.html
@@ -1,4 +1,4 @@
-<h2 ng-if="['syntactical', 'validity', 'quality', 'macro'].indexOf(editType) !== -1"><label for="editId">{{editType | capitalize}} Edit ID:</label> <select id="editId" ng-model="selectedEditId" ng-change="goToEditDetail()" ng-options="id for id in siblingEdits"></select></h2>
+<h2 ng-if="['syntactical', 'validity', 'quality', 'macro'].indexOf(editType) !== -1"><label for="editId">{{editType | capitalize}} Edit ID:</label> <select id="editId" ng-model="selectedEditId" ng-change="goToEditDetail(selectedEditId)" ng-options="id for id in siblingEdits"></select></h2>
 
 <p class="edit-explanation">{{editError.explanation}}</p>
 
@@ -46,4 +46,3 @@ <h2 ng-if="['syntactical', 'validity', 'quality', 'macro'].indexOf(editType) !==
         </div>
     </div>
 </form>
-
diff --git a/test/spec/controllers/errorDetail.js b/test/spec/controllers/errorDetail.js
@@ -173,8 +173,7 @@ describe('Controller: ErrorDetailCtrl', function () {
 
     describe('goToEditDetail()', function() {
         it('should redirect the user to a specific error detail page', function() {
-            scope.selectedEditId = 'V100';
-            scope.goToEditDetail();
+            scope.goToEditDetail('V100');
             scope.$digest();
             expect(location.path()).toBe('/detail/syntactical/V100');
         });

diff --git a/test/spec/controllers/pagination.js b/test/spec/controllers/pagination.js
@@ -9,7 +9,7 @@ describe('Controller: PaginationCtrl', function () {
 
     beforeEach(angular.mock.module('hmdaPilotApp'));
 
-    beforeEach(inject(function ($controller, $rootScope) {
+    beforeEach(inject(function ($controller, $rootScope, $timeout) {
         scope = $rootScope.$new();
         scope.error = {
             errors: []
@@ -19,8 +19,11 @@ describe('Controller: PaginationCtrl', function () {
         }
 
         $controller('PaginationCtrl', {
-            $scope: scope
+            $scope: scope,
+            $element: angular.element('<pagination><table></table></pagination>')
         });
+
+        $timeout.flush();
     }));
 
     describe('Initial scope', function() {

diff --git a/test/spec/directives/wizardNav.js b/test/spec/directives/wizardNav.js
@@ -40,7 +40,7 @@ describe('Directive: WizardNav', function () {
         req.send();
     }));
 
-    beforeEach(inject(function ($rootScope, $location, $compile, _StepFactory_, _Wizard_, _ngDialog_) {
+    beforeEach(inject(function ($rootScope, $timeout, $location, $compile, _StepFactory_, _Wizard_, _ngDialog_) {
         StepFactory = _StepFactory_;
         Wizard = _Wizard_;
         ngDialog = _ngDialog_;
@@ -67,6 +67,7 @@ describe('Directive: WizardNav', function () {
         var html = '<wizard-nav steps="steps"></wizard-nav>';
         element = $compile(html)(scope);
         scope.$digest();
+        $timeout.flush(200);
     }));
 
     it('should display a link for the currently active step ', function () {
@@ -90,6 +91,15 @@ describe('Directive: WizardNav', function () {
         expect(jQuery('li.complete', element).hasClass('focusable')).toBeTruthy();
     });
 
+    it('should toggle "is_focused" class on the parent step when using the keyboard', function() {
+        var step = jQuery('li.complete', element);
+        jQuery('a', step).triggerHandler('focus');
+        expect(step.hasClass('is_focused')).toBeTruthy();
+
+        jQuery('a', step).triggerHandler('blur');
+        expect(step.hasClass('is_focused')).toBeFalsy();
+    });
+
     describe('when the navigating to /selectFile', function() {
         it('should display a confirmation dialog', function() {
             scope.$broadcast('$locationChangeStart', '#/selectFile');