accessability updates

src/popup/app/accounts/views/accountsLogin.html

@@ -26,7 +26,7 @@
                 </div>
             </div>
         </div>
-        <p class="text-center">
+        <p class="text-center text-accent">
             <a ui-sref="hint({animation: 'in-slide-left'})">Get master password hint</a>
         </p>
     </div>

src/popup/app/vault/views/vault.html

@@ -1,6 +1,6 @@
 <div class="header">
     <div class="right">
-        <a href="" ng-click="addSite()"><i class="fa fa-plus fa-lg"></i></a>
+        <a href="javascript:void(0)" ng-click="addSite()"><i class="fa fa-plus fa-lg"></i></a>
     </div>
     <div class="search">
         <input type="search" placeholder="Search vault" ng-model="searchText" id="search" />
@@ -15,25 +15,28 @@
                     <div class="list-grouped-header">
                         <i class="fa fa-folder-open"></i> {{folder.name}}
                     </div>
-                    <div ng-click="viewSite(site)" class="list-grouped-item condensed" style="cursor: pointer;"
+                    <a href="javascript:void(0)" ng-click="viewSite(site)" class="list-grouped-item condensed"
-                         ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id } | filter: searchSites() | orderBy: ['name', 'username'])">
+                       ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id }
-                        <a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
+                            | filter: searchSites() | orderBy: ['name', 'username'])">
-                           ngclipboard-success="clipboardSuccess(e, 'Password')" data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">
+                        <span class="btn-list" ng-click="$event.stopPropagation()" title="Copy Password" ngclipboard
+                              ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, 'Password')"
+                              data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">
                             <i class="fa fa-lg fa-key"></i>
-                        </a>
+                        </span>
-                        <a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Username" ngclipboard ngclipboard-error="clipboardError(e)"
+                        <span class="btn-list" ng-click="$event.stopPropagation()" title="Copy Username" ngclipboard
-                           ngclipboard-success="clipboardSuccess(e, 'Username')" data-clipboard-text="{{site.username}}" ng-class="{'disabled': !site.username}">
+                              ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, 'Username')"
+                              data-clipboard-text="{{site.username}}" ng-class="{'disabled': !site.username}">
                             <i class="fa fa-lg fa-user"></i>
-                        </a>
+                        </span>
                         <span class="text">{{site.name}}</span>
                         <span class="detail">{{site.username}}</span>
-                    </div>
+                    </a>
                 </div>
             </div>
         </div>
     </div>
     <div ng-if="loaded && !vaultSites.length">
-        <p>No sites to list. <a href="" ng-click="addSite()">Add one</a></p>
+        <p>No sites to list. <a href="javascript:void(0)" ng-click="addSite()">Add one</a></p>
     </div>
     <div ng-if="!loaded">
         <p><i class="fa fa-lg fa-spinner fa-spin"></i></p>

src/popup/less/components.less

@@ -19,10 +19,17 @@
         text-decoration: none;
         background: none;
 
-        &:hover {
+        &:hover, &:focus {
             background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        &:hover {
             text-decoration: none;
         }
+
+        &:focus {
+            text-decoration: underline;
+        }
     }
 
     .title {
@@ -133,7 +140,7 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
 
-                &:hover {
+                &:hover, &:focus {
                     background-color: @list-item-hover;
                 }
 
@@ -234,7 +241,7 @@
             }
         }
 
-        &:hover {
+        &:hover, &:focus, &.active {
             background-color: @list-item-hover;
         }
 
@@ -271,6 +278,11 @@
             padding: 10px 8px 10px 8px;
             background: none;
             border: none;
+            color: @brand-primary;
+
+            &:hover, &:focus {
+                color: darken(@brand-primary, 10%);
+            }
 
             &.disabled {
                 color: @text-disabled;
@@ -380,59 +392,10 @@
     -moz-border-radius: 0;
 }
 
-.generate-password-block {
+.btn-link {
-    margin: 20px;
+    color: @brand-primary-accent;
-    font-size: 19px;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: @font-family-monospace;
 }
 
-.about-page {
+.text-accent {
-    padding-top: 50px;
+    color: @brand-primary-accent;
-    text-align: center;
-
-    img {
-        margin: 0 auto 20px;
-        width: 220px;
-        display: block;
-    }
-}
-
-.home-page {
-    padding: 120px 20px 20px;
-    text-align: center;
-    position: relative;
-    height: 100%;
-
-    img {
-        margin: 0 auto 30px;
-        width: 250px;
-        display: block;
-    }
-
-    p {
-        font-size: 18px;
-    }
-
-    .buttons {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        left: 0;
-        padding: 20px;
-    }
-}
-
-.splash-page {
-    text-align: center;
-    padding: 160px 20px 0;
-
-    img {
-        width: 250px;
-        display: block;
-        margin: 0 auto;
-    }
 }

src/popup/less/pages.less

@@ -0,0 +1,67 @@
+@import (reference) "variables.less";
+@import (reference) "mixins.less";
+
+.generate-password-block {
+    margin: 20px;
+    font-size: 19px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: @font-family-monospace;
+}
+
+.about-page {
+    padding-top: 50px;
+    text-align: center;
+
+    img {
+        margin: 0 auto 20px;
+        width: 220px;
+        display: block;
+    }
+}
+
+.home-page {
+    padding: 100px 20px 20px;
+    text-align: center;
+    position: relative;
+    height: 100%;
+
+    img {
+        margin: 0 auto 30px;
+        width: 250px;
+        display: block;
+    }
+
+    p {
+        font-size: 18px;
+    }
+
+    .buttons {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        left: 0;
+        padding: 20px;
+
+        .btn {
+            font-size: @font-size-base;
+        }
+
+        .btn-link {
+            font-weight: 600;
+        }
+    }
+}
+
+.splash-page {
+    text-align: center;
+    padding: 160px 20px 0;
+
+    img {
+        width: 250px;
+        display: block;
+        margin: 0 auto;
+    }
+}

src/popup/less/popup.less

@@ -4,6 +4,7 @@
 @import "components.less";
 @import "animations.less";
 @import "plugins.less";
+@import "pages.less";
 
 body {
     width: 320px;

src/popup/less/variables.less

@@ -16,3 +16,4 @@
 @brand-success: #00a65a;
 @brand-info: #00c0ef;
 @brand-warning: #f39c12;
+@brand-primary-accent: #286090;

src/popup/scripts/popup.js

@@ -32,6 +32,12 @@
                 select.openSelect();
             }
         });
+
+        $('.list-section-item input, .list-section-item select, .list-section-item textarea').focus(function (e) {
+            $(this).parent().addClass('active');
+        }).blur(function (e) {
+            $(this).parent().removeClass('active');
+        });
     }
 
     return self;