1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-22 19:23:52 +00:00

a11y work

This commit is contained in:
Kyle Spearrin
2019-10-08 17:04:44 -04:00
parent f10606adfd
commit 60f6863e4f
32 changed files with 200 additions and 181 deletions

View File

@@ -2,7 +2,7 @@
<header>
<div class="left">
<a routerLink="/tabs/settings">
<span class="header-icon"><i class="fa fa-chevron-left"></i></span>
<span class="header-icon" aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
<span>{{'back' | i18n}}</span>
</a>
</div>
@@ -30,9 +30,10 @@
class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim appAutofocus>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
<a class="row-btn" href="#" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
</div>
</div>

View File

@@ -9,7 +9,7 @@
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading">
<span [hidden]="form.loading">{{'save' | i18n}}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading"></i>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
</div>
</header>
@@ -27,7 +27,7 @@
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
[appApiAction]="deletePromise" #deleteBtn>
<div class="row-main text-danger">
<div class="icon text-danger">
<div class="icon text-danger" aria-hidden="true">
<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>
</div>

View File

@@ -1,7 +1,7 @@
<header>
<div class="left">
<a routerLink="/tabs/settings">
<span class="header-icon"><i class="fa fa-chevron-left"></i></span>
<span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
<span>{{'back' | i18n}}</span>
</a>
</div>
@@ -9,8 +9,8 @@
<span class="title">{{'folders' | i18n}}</span>
</div>
<div class="right">
<button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
<i class="fa fa-plus fa-lg fa-fw"></i>
<button appBlurClick (click)="addFolder()" appA11yTitle="{{'addFolder' | i18n}}">
<i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
</button>
</div>
</header>

View File

@@ -1,7 +1,7 @@
<header>
<div class="left">
<a routerLink="/tabs/settings">
<span class="header-icon"><i class="fa fa-chevron-left"></i></span>
<span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
<span>{{'back' | i18n}}</span>
</a>
</div>

View File

@@ -1,7 +1,7 @@
<header>
<div class="left">
<a routerLink="/tabs/settings">
<span class="header-icon"><i class="fa fa-chevron-left"></i></span>
<span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
<span>{{'back' | i18n}}</span>
</a>
</div>
@@ -17,27 +17,27 @@
<p>{{'premiumSignUpAndGet' | i18n}}</p>
<ul class="fa-ul">
<li>
<i class="fa-li fa fa-check text-success"></i>
<i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
{{'ppremiumSignUpStorage' | i18n}}
</li>
<li>
<i class="fa-li fa fa-check text-success"></i>
<i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
{{'ppremiumSignUpTwoStep' | i18n}}
</li>
<li>
<i class="fa-li fa fa-check text-success"></i>
<i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
{{'ppremiumSignUpReports' | i18n}}
</li>
<li>
<i class="fa-li fa fa-check text-success"></i>
<i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
{{'ppremiumSignUpTotp' | i18n}}
</li>
<li>
<i class="fa-li fa fa-check text-success"></i>
<i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
{{'ppremiumSignUpSupport' | i18n}}
</li>
<li>
<i class="fa-li fa fa-check text-success"></i>
<i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
{{'ppremiumSignUpFuture' | i18n}}
</li>
</ul>
@@ -48,7 +48,7 @@
<button #refreshBtn type="button" appBlurClick (click)="refresh()" [disabled]="refreshBtn.loading"
[appApiAction]="refreshPromise" class="btn link block">
<span [hidden]="refreshBtn.loading">{{'premiumRefresh' | i18n}}</span>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!refreshBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!refreshBtn.loading" aria-hidden="true"></i>
</button>
</ng-container>
<ng-container *ngIf="isPremium">

View File

@@ -13,11 +13,11 @@
<div class="box-content single-line">
<a class="box-content-row box-content-row-flex text-default" routerLink="/folders">
<div class="row-main">{{'folders' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" routerLink="/sync">
<div class="row-main">{{'sync' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
</div>
</div>
@@ -38,12 +38,12 @@
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="lock()">
<div class="row-main">{{'lockNow' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="twoStep()">
<div class="row-main">{{'twoStepLogin' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
</div>
</div>
@@ -52,25 +52,25 @@
<div class="box-content single-line">
<a class="box-content-row" routerLink="/premium">
<div class="row-main">
<div class="icon text-primary"><i class="fa fa-fw fa-lg fa-star"></i></div>
<div class="icon text-primary"><i class="fa fa-fw fa-lg fa-star" aria-hidden="true"></i></div>
<span class="text text-primary"><b>{{'premiumMembership' | i18n}}</b></span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="changePassword()">
<div class="row-main">{{'changeMasterPassword' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="fingerprint()">
<div class="row-main">{{'fingerprintPhrase' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="logOut()">
<div class="row-main">{{'logOut' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
</div>
</div>
@@ -80,22 +80,22 @@
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="import()">
<div class="row-main">{{'importItems' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="export()">
<div class="row-main">{{'exportVault' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="share()">
<div class="row-main">{{'shareVault' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="webVault()">
<div class="row-main">{{'bitWebVault' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
</div>
</div>
@@ -104,22 +104,22 @@
<div class="box-content single-line">
<a class="box-content-row box-content-row-flex text-default" routerLink="/options">
<div class="row-main">{{'options' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="about()">
<div class="row-main">{{'about' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="help()">
<div class="row-main">{{'helpFeedback' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
(click)="rate()">
<div class="row-main">{{'rateExtension' | i18n}}</div>
<i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
<i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
</a>
</div>
<div class="box-footer">{{'rateExtensionDesc' | i18n}}</div>

View File

@@ -244,7 +244,7 @@ export class SettingsComponent implements OnInit {
const versionText = document.createTextNode(
this.i18nService.t('version') + ': ' + BrowserApi.getApplicationVersion());
const div = document.createElement('div');
div.innerHTML = `<p class="text-center"><i class="fa fa-shield fa-3x"></i></p>
div.innerHTML = `<p class="text-center"><i class="fa fa-shield fa-3x" aria-hidden="true"></i></p>
<p class="text-center"><b>Bitwarden</b><br>&copy; 8bit Solutions LLC 2015-` + year + `</p>`;
div.appendChild(versionText);

View File

@@ -1,7 +1,7 @@
<header>
<div class="left">
<a routerLink="/tabs/settings">
<span class="header-icon"><i class="fa fa-chevron-left"></i></span>
<span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
<span>{{'back' | i18n}}</span>
</a>
</div>
@@ -15,7 +15,7 @@
<button type="button" class="btn block primary" (click)="sync()" #syncBtn [disabled]="syncBtn.loading"
[appApiAction]="syncPromise">
<span [hidden]="syncBtn.loading">{{'syncVaultNow' | i18n}}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!syncBtn.loading"></i>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!syncBtn.loading" aria-hidden="true"></i>
</button>
<p class="text-center text-muted small">{{'lastSync' | i18n}} {{lastSync}}</p>
</div>