Qa accessibility

.circleci/config.yml

@@ -1,100 +1,105 @@
 version: 2
-jobs:
-  "build-dev":
+defaults: &defaults
     docker:
-      - image: node:5.10.1
-    steps:
-      - run:
-          name: Installation of build dependencies.
+      - image: node:5.10.1      
+install_dependency: &install_dependency
+  name: Installation of build and deployment dependencies.
+  command: |
+    set +e
+    apt-get update -y
+    apt-get install g++-4.8  -y
+    apt install awscli -y
+    apt install jq -y
+    chmod 777 /etc/mime.types
+    sed -i 's/^application\/x-font-woff.*/application\/font-woff\t\t\t\twoff/' /etc/mime.types
+    sed -i 's/^image\/vnd.microsoft.icon.*/image\/vnd.microsoft.icon/' /etc/mime.types
+    sed -i 's/^image\/x-icon.*/image\/x-icon\t\t\t\tico/' /etc/mime.types    
+install_deploysuite: &install_deploysuite
+  name: Installation of install_deploysuite.
+  command: |
+    git clone --branch v1.4 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
+    cp ./../buildscript/master_deploy.sh .
+    cp ./../buildscript/buildenv.sh .
+    cp ./../buildscript/awsconfiguration.sh .
+restore_cache_settings_for_build: &restore_cache_settings_for_build
+  key: ac-node-modules-{{ checksum "package.json" }}
+save_cache_settings: &save_cache_settings
+  key: ac-node-modules-{{ checksum "package.json" }}
+  paths:
+    - node_modules
+running_npm_build: &running_npm_build
+          name: Running Npm Build
           command: |
-            set +e
-            apt-get update -y
-            apt-get install g++-4.8  -y
-            apt install awscli -y
-            chmod 777 /etc/mime.types
-            sed -i 's/^application\/x-font-woff.*/application\/font-woff\t\t\t\twoff/' /etc/mime.types
-            sed -i 's/^image\/vnd.microsoft.icon.*/image\/vnd.microsoft.icon/' /etc/mime.types
-            sed -i 's/^image\/x-icon.*/image\/x-icon\t\t\t\tico/' /etc/mime.types			
+            source buildenvvar
+            npm rebuild node-sass
+            npm run build
+            npm run build-connector
+            npm test 
+
+builddeploy_steps: &builddeploy_steps
       - checkout
-      - restore_cache:
-          key: ac-node-modules-{{ checksum "package.json" }}
+      - setup_remote_docker
+      - run: *install_dependency
+      - run: *install_deploysuite
+      - restore_cache: *restore_cache_settings_for_build
       - run: npm install
-      - save_cache:
-          key: ac-node-modules-{{ checksum "package.json" }}
-          paths:
-            - node_modules
-      - run: npm rebuild node-sass
-      - run: npm run build
-      - run: npm run build-connector
-      - run: npm test
-      - run: ./deploy.sh DEV
-  "build-qa":
-    docker:
-      - image: node:5.10.1
-    steps:
-      - run:
-          name: Installation of build dependencies.
+      - save_cache: *save_cache_settings
+      - run: 
+          name: "configuring environment"
           command: |
-            apt-get update -y
-            apt-get install g++-4.8  -y
-            apt install awscli -y            
-            chmod 777 /etc/mime.types
-            sed -i 's/^application\/x-font-woff.*/application\/font-woff\t\t\t\twoff/' /etc/mime.types
-            sed -i 's/^image\/vnd.microsoft.icon.*/image\/vnd.microsoft.icon/' /etc/mime.types
-            sed -i 's/^image\/x-icon.*/image\/x-icon\t\t\t\tico/' /etc/mime.types			
-      - checkout
-      - restore_cache:
-          key: ac-node-modules-{{ checksum "package.json" }}
-      - run: npm install
-      - save_cache:
-          key: ac-node-modules-{{ checksum "package.json" }}
-          paths:
-            - node_modules
-      - run: npm run build
-      - run: npm run build-connector
-      - run: npm test
-      - run: ./deploy.sh QA
-  "build-prod":
-    docker:
-      - image: node:5.10.1
-    steps:
-      - run:
-          name: Installation of build dependencies.
+            ./awsconfiguration.sh $DEPLOY_ENV
+            ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-buildvar
+      - run: *running_npm_build          
+      - deploy:
+          name: Running MasterScript.
           command: |
-            set +e
-            apt-get update -y
-            apt-get install g++-4.8  -y
-            apt install awscli -y            
-            chmod 777 /etc/mime.types
-            sed -i 's/^application\/x-font-woff.*/application\/font-woff\t\t\t\twoff/' /etc/mime.types
-            sed -i 's/^image\/vnd.microsoft.icon.*/image\/vnd.microsoft.icon/' /etc/mime.types
-            sed -i 's/^image\/x-icon.*/image\/x-icon\t\t\t\tico/' /etc/mime.types			
-      - checkout
-      - restore_cache:
-          key: ac-node-modules-{{ checksum "package.json" }}
-      - run: npm install
-      - save_cache:
-          key: ac-node-modules-{{ checksum "package.json" }}
-          paths:
-            - node_modules
-      - run: npm rebuild node-sass            
-      - run: npm run build
-      - run: npm run build-connector
-      - run: npm test
-      - run: ./deploy.sh PROD      
+            # ./deploy.sh $DEPLOY_ENV 
+            # ./awsconfiguration.sh $DEPLOY_ENV
+            source awsenvconf
+            ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-deployvar
+            source buildenvvar
+            ./master_deploy.sh -d CFRONT -e $DEPLOY_ENV -c true
+
+jobs:
+  # Build & Deploy against development backend
+  "build-dev":
+    <<: *defaults
+    environment:
+      DEPLOY_ENV: "DEV"
+      LOGICAL_ENV: "dev"
+      APPNAME: "accounts-app"          
+    steps: *builddeploy_steps
+  "build-qa":
+    <<: *defaults
+    environment:
+      DEPLOY_ENV: "QA"
+      LOGICAL_ENV: "qa"
+      APPNAME: "accounts-app"          
+    steps: *builddeploy_steps
+  "build-prod":
+    <<: *defaults
+    environment:
+      DEPLOY_ENV: "PROD"
+      LOGICAL_ENV: "prod"
+      APPNAME: "accounts-app"        
+    steps: *builddeploy_steps
+
 workflows:
   version: 2
   build:
     jobs:
       - build-dev:
+          context : org-global
           filters:
             branches:
-              only: [ dev, dev-circleci2 ]
+              only: [ dev, qa-accessibility ]
       - build-qa:
+          context : org-global
           filters:
             branches:
               only: qa
       - build-prod:
+          context : org-global
           filters:
             branches:
-              only: master              
+              only: master

app/app-config.coffee

@@ -72,6 +72,7 @@ config = (
 
   states['MEMBER_LOGIN'] =
     url: '/member?retUrl&handle&password&return_to&client_id&response_type&state&redirect_uri&scope'
+    title: 'Login'
     controller  : 'TCLoginController as vm'
     template: require('./views/tc/login')()
     public: true
@@ -87,6 +88,7 @@ config = (
   # message      : (optional) A message handed by Identity Service when some error occurs
   states['MEMBER_REGISTRATION'] =
     url: '/member/registration?retUrl&utm_source&utm_medium&utm_campaign&userJWTToken&auth0Jwt&auth0Refresh&message'
+    title: 'Register'
     params: { 'auth0Data', 'regForm' }
     controller  : 'TCRegistrationController as vm'
     template: require('./views/tc/register.jade')()

app/app-run.coffee

@@ -9,6 +9,8 @@ run = ($log, $rootScope, $state, $urlRouter, $location) ->
 
     # hide common footer and banner for connect pages to allow new styled footer for connect
     $rootScope.hideCommonFooter = toState.url && toState.url.indexOf('/connect') != -1
+    # page title
+    $rootScope.pageTitle = toState.title
     path = $location.path()
     queryString = ''
     referrer = ''

app/index.jade

@@ -1,11 +1,11 @@
 doctype html
-html(ng-app='accounts')
+html(ng-app='accounts', xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang='en')
   head
     meta(http-equiv='Content-type', content='text/html; charset=utf-8')
     meta(http-equiv='X-UA-Compatible', content='IE=edge, chrome=1')
-    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
     base(href='/')
-    title Topcoder
+    title(ng-bind="pageTitle ? pageTitle + ' | Topcoder' : 'Topcoder'")
     style.
       .ng-hide {
       display: none !important;
@@ -16,7 +16,7 @@ html(ng-app='accounts')
       .img
     ui-view.view-container
 
-    div(ui-view="footer", ng-controller="FooterController as vm", ng-hide="hideCommonFooter")
+    div(ui-view="footer", ng-controller="FooterController as vm", ng-hide="hideCommonFooter", role="contentinfo" aria-label="Footer")
       .account-footer
         a.privacy-policy(ng-href="https://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank")
           | Privacy Policy

app/scripts/directives/toggle-password-directive-tips.js

@@ -5,7 +5,9 @@ import angular from 'angular'
 
   angular.module('accounts.directives').directive('togglePasswordWithTips', togglePasswordWithTips)
 
-  function togglePasswordWithTips() {
+  togglePasswordWithTips.$inject = ['$timeout']
+
+  function togglePasswordWithTips($timeout) {
     return {
       restrict: 'E',
       require: '^form',
@@ -46,7 +48,9 @@ import angular from 'angular'
             passwordInput.focus()
           } else {
             // If you are blurring from the password input and clicking anywhere but the checkbox
-            vm.passwordFocus = false
+            $timeout(function () {
+              vm.passwordFocus = false
+            }, 100)
 
             if (vm.password === '' || vm.password === undefined) {
               vm.placeholder = vm.defaultPlaceholder

app/scripts/tc/register.controller.js

@@ -14,9 +14,9 @@ import { getNewJWT } from '../../../core/auth.js'
 
   angular.module('accounts').controller('TCRegistrationController', TCRegistrationController)
 
-  TCRegistrationController.$inject = ['$log', '$scope', '$state', '$stateParams', 'UserService', 'ISO3166']
+  TCRegistrationController.$inject = ['$log', '$scope', '$state', '$stateParams', 'UserService', 'ISO3166', '$timeout']
 
-  function TCRegistrationController($log, $scope, $state, $stateParams, UserService, ISO3166) {
+  function TCRegistrationController($log, $scope, $state, $stateParams, UserService, ISO3166, $timeout) {
     var vm = this
     vm.registering = false
     // auth0 login data, passed from another states as state param
@@ -58,6 +58,18 @@ import { getNewJWT } from '../../../core/auth.js'
       vm.ssoForced = !!(identifySSOProvider(email))     
     })
 
+    $scope.usernameFocusLoss = function () {
+      $timeout(function () {
+        vm.usernameTips = false
+      }, 100);
+    }
+
+    $scope.emailFocusLoss = function () {
+      $timeout(function () {
+        vm.emailTips = false
+      }, 100);
+    }
+
     vm.updateCountry = function (angucompleteCountryObj) {
       var countryCode = _.get(angucompleteCountryObj, 'originalObject.code', undefined)
 

app/styles/connect/connect.scss

@@ -1,4 +1,4 @@
-@import "../tc-ui-variables";
+@import "../tc-ui-variables.scss";
 
 .connect-accounts-container {
   background: $tc-gray-neutral-light;
@@ -75,11 +75,17 @@
 
   p.error {
     text-align: center;
+    color: $tc-red-110;
   }
 
   a {
-    color: #0B71E6;
+    color: $tc-dark-blue-90;
     text-decoration: none;
+    outline-width: 3px;
+  }
+
+  a:focus{
+    outline: 2px solid $tc-dark-blue-70;
   }
 
   .small-text {

app/styles/connect/login.scss

@@ -8,6 +8,10 @@
     flex-direction: column;
     align-items: center;
 
+    span {
+      text-decoration: underline;
+    }
+
     hr {
       width: 50%;
     }

app/styles/directives/toggle-password-with-tips.directive.scss

@@ -1,4 +1,5 @@
 @import 'topcoder/tc-includes';
+@import "../tc-ui-variables.scss";
 
 // Toggle password with password tips directive
 toggle-password-with-tips {
@@ -20,7 +21,7 @@ toggle-password-with-tips {
 
   .input-btn .input:focus ~ .tc-btn {
     color: #FFFFFF;
-    background: #59A7FF;
+    background: $tc-dark-blue-90;
   }
 
   .input-btn .tc-btn,
@@ -30,7 +31,7 @@ toggle-password-with-tips {
     position: absolute;
     right: 1px;
     top: 1px;
-    background: #DCDCE0;
+    background: $tc-gray-60;
     border: 0;
     height: 38px;
     border-radius: 0 3px 3px 0;

app/styles/directives/toggle-password.directive.scss

@@ -1,4 +1,5 @@
 @import 'topcoder/tc-includes';
+@import '../tc-ui-variables.scss';
 
 // Toggle password directive
 toggle-password {
@@ -29,25 +30,20 @@ toggle-password {
   .input-btn .tc-btn:active {
     position: absolute;
     right: 1px;
-    top: 1px;
-    background: #DCDCE0;
+    top: 21px;
+    background: $tc-white;
     border: 0;
+    border-left: 1px solid $tc-gray-30;
     height: 38px;
     border-radius: 0 3px 3px 0;
     box-shadow: none;
     line-height: inherit;
+    color: $tc-gray-80;
   }
 
   button#toggleInputTypeBtn {
     width: 75px;
     margin-top: 0px;
   }
 
-  label {
-    display: flex !important;
-    line-height: 20px !important;
-    position: absolute;
-    top: 10px;
-    right: 0px;
-  }
 }