aria-hidden on titles icons

This commit is contained in:
Kyle Spearrin 2019-04-01 22:56:28 -04:00
parent 4d46338a4b
commit 20bc5a6870
17 changed files with 71 additions and 60 deletions

View File

@ -55,7 +55,7 @@
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}">
<i class="fa fa-save fa-lg fa-fw"></i>
<i class="fa fa-save fa-lg fa-fw" aria-hidden="true"></i>
</button>
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
</div>

View File

@ -18,7 +18,8 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>

View File

@ -17,7 +17,8 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>

View File

@ -58,8 +58,9 @@
<div class="right" *ngIf="!isPremium">
<button #refreshBtn type="button" appBlurClick (click)="refresh()" [disabled]="refreshBtn.loading"
appA11yTitle="{{'premiumRefresh' | i18n}}" [appApiAction]="refreshPromise">
<i class="fa fa-refresh fa-lg fa-fw" [hidden]="refreshBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!refreshBtn.loading"></i>
<i class="fa fa-refresh fa-lg fa-fw" [hidden]="refreshBtn.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!refreshBtn.loading"
aria-hidden="true"></i>
</button>
</div>
</div>

View File

@ -25,7 +25,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
@ -52,7 +52,8 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>

View File

@ -34,17 +34,19 @@
<button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
[appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
<i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
<i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"
aria-hidden="true"></i>
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
aria-hidden="true"></i>
</button>
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()">
<i class="fa fa-lg fa-refresh"></i>
<i class="fa fa-lg fa-refresh" aria-hidden="true"></i>
</a>
</div>
</div>
@ -91,7 +93,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
</a>
</div>
@ -194,7 +196,7 @@
<div class="box-content-row box-content-row-multi" appBoxRow
*ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
<a href="#" appStopClick (click)="removeUri(u)" appA11yTitle="{{'remove' | i18n}}">
<i class="fa fa-minus-circle fa-lg"></i>
<i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
</a>
<div class="row-main">
<label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
@ -212,7 +214,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
<i class="fa fa-lg fa-cog"></i>
<i class="fa fa-lg fa-cog" aria-hidden="true"></i>
</a>
</div>
</div>
@ -266,7 +268,7 @@
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
<a href="#" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
<i class="fa fa-minus-circle fa-lg"></i>
<i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
</a>
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
@ -285,12 +287,12 @@
<div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
</a>
</div>
<div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
<i class="fa fa-bars"></i>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
@ -339,8 +341,8 @@
</div>
<div class="footer">
<button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<button appBlurClick type="button" (click)="cancel()">
{{'cancel' | i18n}}
@ -348,13 +350,13 @@
<div class="right">
<button appBlurClick type="button" (click)="share()" appA11yTitle="{{'shareItem' | i18n}}"
*ngIf="editMode && cipher && !cipher.organizationId">
<i class="fa fa-share-alt fa-lg fa-fw"></i>
<i class="fa fa-share-alt fa-lg fa-fw" aria-hidden="true"></i>
</button>
<button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
[appApiAction]="deletePromise">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" aria-hidden="true"></i>
</button>
</div>
</div>

View File

@ -16,8 +16,10 @@
<button class="row-btn btn" type="button" appStopClick appBlurClick
appA11yTitle="{{'delete' | i18n}}" (click)="delete(a)" #deleteBtn
[appApiAction]="deletePromises[a.id]" [disabled]="deleteBtn.loading">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"
aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
aria-hidden="true"></i>
</button>
</div>
</div>
@ -41,8 +43,8 @@
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
[disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
</div>

View File

@ -35,6 +35,6 @@
<div class="footer">
<button appBlurClick (click)="addCipher()" (contextmenu)="addCipherOptions()" class="block primary"
appA11yTitle="{{'addItem' | i18n}}">
<i class="fa fa-plus fa-lg"></i>
<i class="fa fa-plus fa-lg" aria-hidden="true"></i>
</button>
</div>

View File

@ -22,8 +22,8 @@
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
[disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
</div>

View File

@ -24,7 +24,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
@ -38,7 +38,7 @@
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" appA11yTitle="{{'submit' | i18n}}">
<i class="fa fa-download fa-lg fa-fw"></i>
<i class="fa fa-download fa-lg fa-fw" aria-hidden="true"></i>
</button>
<button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
</div>

View File

@ -18,16 +18,17 @@
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
[disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
<div class="right">
<button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
[appApiAction]="deletePromise">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
aria-hidden="true"></i>
</button>
</div>
</div>

View File

@ -40,7 +40,7 @@
<h2>
{{'folders' | i18n}}
<button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
<i class="fa fa-plus fa-fw"></i>
<i class="fa fa-plus fa-fw" aria-hidden="true"></i>
</button>
</h2>
<ul class="fa-ul">
@ -48,13 +48,13 @@
<li *ngFor="let f of folders"
[ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
<a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
<i class="fa-li fa" appA11yTitle="{{'toggleCollapse' | i18n}}"
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
[ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}"
(click)="collapse(f.node)" appStopProp></i>
{{f.node.name}}
<span appStopProp appStopClick (click)="editFolder(f.node)"
appA11yTitle="{{'editFolder' | i18n}}" *ngIf="f.node.id">
<i class="fa fa-pencil fa-fw"></i>
<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
</span>
</a>
<ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
@ -71,7 +71,7 @@
<ng-template #recursiveCollections let-collections>
<li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
<a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
<i class="fa-li fa" appA11yTitle="{{'toggleCollapse' | i18n}}"
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" aria-hidden="true"
[ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}"
(click)="collapse(c.node)" appStopProp></i>
{{c.node.name}}

View File

@ -16,7 +16,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
(click)="copy(h.password)">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -31,7 +31,7 @@
<div class="right">
<button appBlurClick type="button" (click)="clear()" class="danger"
appA11yTitle="{{'clear' | i18n}}">
<i class="fa fa-trash-o fa-lg fa-fw"></i>
<i class="fa fa-trash-o fa-lg fa-fw" aria-hidden="true"></i>
</button>
</div>
</div>

View File

@ -103,7 +103,7 @@
<div class="modal-footer">
<button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()"
appA11yTitle="{{'select' | i18n}}">
<i class="fa fa-lg fa-fw fa-check"></i>
<i class="fa fa-lg fa-fw fa-check" aria-hidden="true"></i>
</button>
<button type="button" data-dismiss="modal">{{(showSelect ? 'cancel' : 'close') | i18n}}</button>
</div>

View File

@ -17,7 +17,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
(click)="copy(h.password)">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>

View File

@ -44,8 +44,8 @@
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" appA11yTitle="{{'save' | i18n}}"
[disabled]="form.loading || !canSave" *ngIf="organizations && organizations.length">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
</div>

View File

@ -19,7 +19,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyUsername' | i18n}}"
(click)="copy(cipher.login.username, 'username', 'Username')">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -35,17 +35,19 @@
<button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
[appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
<i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
<i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"
aria-hidden="true"></i>
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
aria-hidden="true"></i>
</button>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
(click)="copy(cipher.login.password, 'password', 'Password')">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -68,7 +70,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
(click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -87,7 +89,7 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyNumber' | i18n}}"
(click)="copy(cipher.card.number, 'number', 'Number')">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -108,12 +110,12 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleCardCode()">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copySecurityCode' | i18n}}"
(click)="copy(cipher.card.code, 'securityCode', 'Security Code')">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -179,11 +181,11 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
(click)="launch(u)">
<i class="fa fa-lg fa-share-square-o"></i>
<i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyUri' | i18n}}"
(click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -220,13 +222,13 @@
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
*ngIf="field.type === fieldType.Hidden" (click)="toggleFieldValue(field)">
<i class="fa fa-lg"
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
*ngIf="field.value && field.type !== fieldType.Boolean"
(click)="copy(field.value, 'value', 'Field')">
<i class="fa fa-lg fa-clipboard"></i>
<i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
</a>
</div>
</div>
@ -261,7 +263,7 @@
<b class="font-weight-semibold">{{'passwordHistory' | i18n}}:</b>
<a href="#" (click)="viewHistory()" appStopClick
appA11yTitle="{{'passwordHistory' | i18n}}, {{cipher.passwordHistory.length}}">
{{cipher.passwordHistory.length}}
<span aria-hidden="true">{{cipher.passwordHistory.length}}</span>
</a>
</div>
</div>
@ -270,6 +272,6 @@
</div>
<div class="footer">
<button appBlurClick class="primary" (click)="edit()" appA11yTitle="{{'edit' | i18n}}">
<i class="fa fa-pencil fa-fw fa-lg"></i>
<i class="fa fa-pencil fa-fw fa-lg" aria-hidden="true"></i>
</button>
</div>