Merge branch 'qa-accessibility' into qa-accessibility-2912

Author: mishacucicea

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 Login | 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="region" aria-label="Footer")
       footer.account-footer(tabindex="-1", onkeydown="return false;")
         a.privacy-policy(ng-href="https://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank")
           | Privacy Policy

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;
@@ -79,8 +79,9 @@
   }
 
   a {
-    color: #006dea;
+    color: $tc-dark-blue-90;
     text-decoration: none;
+    outline-width: 3px;
   }
 
   a:focus{

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 {
@@ -30,14 +31,14 @@ toggle-password {
     position: absolute;
     right: 1px;
     top: 1px;
-    background: #ffffff;
+    background: $tc-white;
     border: 0;
-    border-left: 1px solid #c3c3c8;
+    border-left: 1px solid $tc-gray-30;
     height: 38px;
     border-radius: 0 3px 3px 0;
     box-shadow: none;
     line-height: inherit;
-    color: #47474f;
+    color: $tc-gray-80;
   }
 
   button#toggleInputTypeBtn {

app/styles/tc-ui-variables.scss

@@ -27,7 +27,7 @@ $tc-black                       : #262628;
 $tc-gray-90                     : #37373C;
 $tc-gray-80                     : #47474F;
 $tc-gray-70                     : #5D5D66;
-$tc-gray-60                     : #747480;
+$tc-gray-60                     : #6B6B6B;
 $tc-gray-50                     : #888894;
 $tc-gray-40                     : #A3A3AD;
 $tc-gray-30                     : #C3C3C8;
@@ -36,8 +36,10 @@ $tc-gray-10                     : #EDEDF2;
 $tc-gray-neutral-dark           : #EBEBEB;
 $tc-gray-neutral-light          : #FAFAFB;
 $tc-white                       : #FFFFFF;
+$tc-white-cream                 : #F6F6F6;
 
 // Accents & Shades
+$tc-dark-blue-110               : #006AD7;
 $tc-dark-blue                   : $tc-dark-blue;
 $tc-dark-blue-90                : #006AD7;
 $tc-dark-blue-70                : #59A7FF;

app/styles/tc-ui.scss

@@ -93,6 +93,10 @@
     font-family: inherit;
     font-weight: inherit;
   }
+  
+  .tc-btn.show-password-btn:focus {
+    outline: 2px solid $tc-dark-blue-70;
+  }
 
   .tc-btn.loading:enabled, .tc-btn:focus:not(:disabled) {
     background: $tc-white;
@@ -356,4 +360,4 @@
     font-size: 15px;
     line-height: 20px;
   }
-}
+}

app/styles/tc/account.scss

@@ -1,5 +1,6 @@
 @import 'topcoder/tc-includes';
 @import 'topcoder/tc-forms';
+@import '../tc-ui-variables.scss';
 
 .login-container,
 .register-container,
@@ -25,7 +26,7 @@
     height: 70px;
     position: relative;
 
-    .logo-link img {
+    .logo-link img, .ico img {
       display: inline-block;
       height: 30px;
     }
@@ -96,7 +97,7 @@
       }
       span {
         @include font-with-weight('Sofia Pro', 500);
-        color: #6b6b6b;
+        color: $tc-gray-60;
         cursor: pointer;
         font-size: 10px;
         line-height: 13px;
@@ -115,7 +116,7 @@
     margin-bottom: 40px;
     p {
       @include font-with-weight;
-      color: #6b6b6b;
+      color: $tc-gray-60;
       font-size: 13px;
       line-height: 22px;
       text-transform: uppercase;
@@ -191,6 +192,11 @@
   text-transform: uppercase;
   a {
     display: inline;
+    color: $tc-dark-blue-90 !important;
+    text-decoration: underline;
+    &:focus {
+      outline: 3px auto $tc-dark-blue-90;
+    }
   }
   .redirect {
     width: 111px;
@@ -209,8 +215,11 @@
   justify-content: center;
   background-color: $gray-lighter;
   padding: 20px 30px 20px 30px;
+  a {
+    text-decoration: underline;
+  }
   .copyright-notice {
-    color: #6b6b6b;
+    color: $tc-gray-60;
   }
 }
 

app/styles/tc/footer.scss

@@ -39,6 +39,10 @@
 .privacy-policy {
   @extend .copyright-notice;
   margin-right: 1.0em;
+
+  &:focus {
+	color: $tc-dark-blue;
+  }
 }
 
 a.privacy-policy:focus {

app/styles/tc/login.scss

@@ -1,4 +1,5 @@
 @import 'topcoder/tc-includes';
+@import "../tc-ui-variables";
 
 .login-container {
   form {
@@ -9,13 +10,26 @@
 
     p + button {
       margin-top: 0;
+      
+      &:focus {
+        outline: 3px auto $tc-dark-blue-90;
+      }
     }
   }
   .form-errors {
     p {
       margin-bottom: 20px;
     }
   }
+
+  button[type=submit] {
+    background-color: $tc-dark-blue-110 !important;
+  }
+
+  button[type=submit]:disabled {
+    background-color: $tc-gray-60 !important;
+  }
+
   .problem-signin {
     @include font-with-weight('Merriweather Sans');
     color: #a3a3ae;
@@ -26,9 +40,21 @@
       font-size: 12px;
       margin-bottom: 25px;
       margin-top: 25px;
+      color: #006DEA;
+      &:focus {
+        outline: 3px auto $tc-dark-blue-90;
+      }
     }
   }
   section.login-options {
+    a:focus {
+      outline: 3px auto $tc-dark-blue-90;
+    .network {
+      span {
+        text-decoration: underline;
+      }
+    }
+  }
     @media (max-width: 767px) {
       margin-bottom: 41px;
     }

app/styles/tc/register.scss

@@ -1,13 +1,27 @@
 @import 'topcoder/tc-includes';
+@import '../tc-ui-variables.scss';
 
 .register-container {
+  a {
+    text-decoration: underline;
+  }
+
   form {
     display: flex;
     flex-flow: column wrap;
     justify-content: center;
     align-items: center;
     button {
       margin-top: 0;
+      background-color: $tc-dark-blue-90;
+      &:focus {
+        outline: 3px solid $tc-dark-blue-70;
+      }
+      &.disabled {
+        background-color: $tc-gray-60 !important;
+        color: $tc-white-cream;
+        opacity: 1;
+      }
     }
 
     @media (min-width: 768px) {
@@ -53,8 +67,20 @@
     }
   }
 
-  .login-options .networks .network .ico:focus {
-    outline: 3px solid #77A1F8;
+  .login-options .networks .network {
+    span {
+      color: #757585;
+      text-decoration: underline;  
+    }
+    .ico:focus {
+      outline: 3px solid #77A1F8;
+    }
+  }
+} 
+
+.join-topcoder {
+  a {
+    text-decoration: underline;
   }
 }
 

app/styles/tc/reset-password.scss

@@ -1,4 +1,4 @@
-@import 'topcoder/tc-includes';
+@import "topcoder/tc-includes";
 @import "../tc-ui-variables";
 
 .reset-password-container {
@@ -11,7 +11,7 @@
       align-self: center;
       margin-top: 0px;
 
-      &[type='submit'] {
+      &[type="submit"] {
         margin-top: 20px;
       }
     }
@@ -21,8 +21,10 @@
     margin-bottom: 25px;
     margin-top: 25px;
   }
-  .link:focus {
-    outline: 2px solid $tc-dark-blue-90;
+  .link {
+    a:focus {
+      outline: 2px solid $tc-dark-blue-90;
+    }
   }
 
   .tc-btn:focus {

app/views/directives/toggle-password-with-tips.directive.jade

@@ -18,4 +18,4 @@
     class="input input-btn {{ vm.hasPasswordError() ? 'error' : ''}}"
     required)
 
-  <button type="button" id="toggleInputTypeBtn" class="tc-btn tc-btn-sm" ng-click="vm.toggleInputType()">{{ vm.toggleShowLabel }}</button>
+  <button type="button" id="toggleInputTypeBtn" tabIndex="0"  class="tc-btn tc-btn-sm show-password-btn" ng-click="vm.toggleInputType()">{{ vm.toggleShowLabel }}</button>