Upstream
/
bitwarden-desktop
mirror of https://github.com/bitwarden/desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change links to buttons, expose `aria-pressed` for toggles, add `aria-expanded` to send view's "Options" (#1437) 

* Change links to buttons, expose `aria-pressed` for toggles

- also make existing `<a routerLink...>` type controls keyboard focusable with the addition of `tabindex="0"`

* Correctly set aria-pressed

now that I have a working build environment, could verify correct way to set this with my limited Angular knowledge

* Change more links to buttons, initial style changes

* Fix layout of <button> elements with .box-content-row

* Update jslib submodule

* Add `aria-expanded` to the send view's "Show options" expand/collapse control

* Fix position of "Edit" pencil when hovering over folders

* Update jslib

* Change sends list links to buttons

* Add `aria-pressed` to vault and send list buttons

Programmatically denote which of the buttons is currently active/shown in the right-most panel

* Fix incorrect "Options" expand/collapse button in add-edit view

Currently, that buttons lacks an accName because the "Options" text is outside of it.

* Add `aria-pressed` to the send left-hand column filters

* Simplify base, list, and vault styles

Since links are now buttons, no need to double up selectors for both types of elements. No need to double-up theming in base, as this also causes incorrect "x" in toasts.

* Remove unnecessary `position:relative`

Fixes issue with cut-off focus outlines, has no other adverse effect

* Fix styling for last child of action buttons

Old approach of making right padding smaller results in unsightly, off-center icon (noticeable when focus outline is visible). This visually remains the same, but reduces right-hand margin instead.
This commit is contained in:
Patrick H. Lauke 2022-04-30 15:09:41 +01:00 committed by GitHub
parent ef60112855
commit 0396d682b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 303 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/accounts/hint.component.html
View File

@ -25,7 +25,7 @@
<b [hidden]="form.loading">{{ "submit" | i18n }}</b>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
<a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
</div>
</div>
</form>

7
src/app/accounts/lock.component.html
View File

@ -30,12 +30,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -45,7 +44,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
</div>

25
src/app/accounts/login.component.html
View File

@ -1,7 +1,7 @@
<div id="login-page">
<div class="login-header">
<a
href="#"
<button
type="button"
appStopClick
(click)="settings()"
class="environment-urls-settings-icon"
@ -9,7 +9,7 @@
>
<i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
{{ "settings" | i18n }}
</a>
</button>
</div>
<form
id="login-page"
@ -48,12 +48,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -63,7 +62,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
</div>
@ -83,18 +82,22 @@
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a routerLink="/register" class="btn block">
<a role="button" tabindex="0" routerLink="/register" class="btn block">
<i class="bwi bwi-pencil-square" aria-hidden="true"></i> {{ "createAccount" | i18n }}
</a>
</div>
<div class="buttons-row">
<a (click)="launchSsoBrowser('desktop', 'bitwarden://sso-callback')" class="btn block">
<button
type="button"
(click)="launchSsoBrowser('desktop', 'bitwarden://sso-callback')"
class="btn block"
>
<i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
</a>
</button>
</div>
</div>
<div class="sub-options">
<a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
<a role="button" tabindex="0" routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
</div>
</div>
</form>

16
src/app/accounts/register.component.html
View File

@ -40,12 +40,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(false)"
@ -55,7 +54,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
<div class="progress">
@ -91,12 +90,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(true)"
@ -106,7 +104,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" appBoxRow>
@ -146,7 +144,7 @@
<b [hidden]="form.loading">{{ "submit" | i18n }}</b>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
<a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
</div>
</div>
</form>

14
src/app/accounts/set-password.component.html
View File

@ -56,12 +56,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(false)"
@ -71,7 +70,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
<div class="progress">
@ -109,12 +108,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(true)"
@ -124,7 +122,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
</div>

10
src/app/accounts/two-factor-options.component.html
View File

@ -7,8 +7,8 @@
{{ "twoStepOptions" | i18n }}
</div>
<div class="box-content">
<a
href="#"
<button
type="button"
appStopClick
*ngFor="let p of providers"
class="box-content-row"
@ -17,11 +17,11 @@
<img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="img-right" />
<span class="text">{{ p.name }}</span>
<span class="detail">{{ p.description }}</span>
</a>
<a href="#" appStopClick class="box-content-row" (click)="recover()">
</button>
<button type="button" appStopClick class="box-content-row" (click)="recover()">
<span class="text">{{ "recoveryCodeTitle" | i18n }}</span>
<span class="detail">{{ "recoveryCodeDesc" | i18n }}</span>
</a>
</button>
</div>
</div>
</div>

15
src/app/accounts/two-factor.component.html
View File

@ -124,22 +124,21 @@
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
<a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
</div>
<div class="sub-options">
<a href="#" appStopClick (click)="anotherMethod()" role="button">{{
"useAnotherTwoStepMethod" | i18n
}}</a>
<a
href="#"
<button type="button" appStopClick (click)="anotherMethod()">
{{ "useAnotherTwoStepMethod" | i18n }}
</button>
<button
type="button"
appStopClick
(click)="sendEmail(true)"
[appApiAction]="emailPromise"
role="button"
*ngIf="selectedProviderType === providerType.Email"
>
{{ "sendVerificationCodeEmailAgain" | i18n }}
</a>
</button>
</div>
</div>
</form>

16
src/app/accounts/update-temp-password.component.html
View File

@ -36,12 +36,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(false)"
@ -51,7 +50,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
<div class="progress">
@ -84,12 +83,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(true)"
@ -99,7 +97,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
</div>
@ -120,7 +118,7 @@
<b [hidden]="form.loading">{{ "submit" | i18n }}</b>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a (click)="logOut()" class="btn block">{{ "logOut" | i18n }}</a>
<button type="button" (click)="logOut()" class="btn block">{{ "logOut" | i18n }}</button>
</div>
</div>
</form>

7
src/app/components/password-reprompt.component.html
View File

@ -19,12 +19,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -34,7 +33,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
</div>

6
src/app/components/set-pin.component.html
View File

@ -22,9 +22,9 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
@ -36,7 +36,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPin, 'bwi-eye-slash': showPin }"
></i>
</a>
</button>
</div>
</div>
</div>

17
src/app/send/add-edit.component.html
View File

@ -93,21 +93,21 @@
</div>
<div class="box">
<div class="box-header">
{{ "options" | i18n }}
<a
<button
type="button"
class="toggle"
href="#"
appStopClick
appBlurClick
role="button"
(click)="toggleOptions()"
[attr.aria-expanded]="showOptions"
>
{{ "options" | i18n }}
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
></i>
</a>
</button>
</div>
</div>
<div [hidden]="!showOptions">
@ -157,12 +157,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePasswordVisible()"
@ -173,7 +172,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
</button>
</div>
</div>
</div>

47
src/app/send/send.component.html
View File

@ -5,26 +5,44 @@
<h2 class="sr-only">{{ "filters" | i18n }}</h2>
<ul>
<li [ngClass]="{ active: selectedAll }">
<a href="#" appStopClick appBlurClick (click)="selectAll()">
<button
type="button"
appStopClick
appBlurClick
(click)="selectAll()"
[attr.aria-pressed]="selectedAll"
>
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allSends" | i18n }}
</a>
</button>
</li>
</ul>
<h2>{{ "types" | i18n }}</h2>
<ul>
<li [ngClass]="{ active: selectedType === sendType.Text }">
<a href="#" appStopClick appBlurClick (click)="selectType(sendType.Text)">
<button
type="button"
appStopClick
appBlurClick
(click)="selectType(sendType.Text)"
[attr.aria-pressed]="selectedType === sendType.Text"
>
<i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>&nbsp;{{
"sendTypeText" | i18n
}}
</a>
</button>
</li>
<li [ngClass]="{ active: selectedType === sendType.File }">
<a href="#" appStopClick appBlurClick (click)="selectType(sendType.File)">
<button
type="button"
appStopClick
appBlurClick
(click)="selectType(sendType.File)"
[attr.aria-pressed]="selectedType === sendType.File"
>
<i class="bwi bwi-fw bwi-file" aria-hidden="true"></i>&nbsp;{{
"sendTypeFile" | i18n
}}
</a>
</button>
</li>
</ul>
</div>
@ -36,20 +54,21 @@
<div id="items" class="items">
<div class="content">
<div class="list" *ngIf="filteredSends.length">
<a
<button
*ngFor="let s of filteredSends"
appStopClick
(click)="selectSend(s.id)"
title="{{ 'viewItem' | i18n }}"
(contextmenu)="viewSendMenu(s)"
[ngClass]="{ active: s.id === sendId }"
[attr.aria-pressed]="s.id === sendId"
class="flex-list-item"
>
<div class="item-icon" aria-hidden="true">
<span class="item-icon" aria-hidden="true">
<i class="bwi bwi-fw bwi-lg" [ngClass]="s.type == 0 ? 'bwi-file-text' : 'bwi-file'"></i>
</div>
<div class="item-content">
<div class="item-title">
</span>
<span class="item-content">
<span class="item-title">
{{ s.name }}
<span class="title-badges">
<ng-container *ngIf="s.disabled">
@ -98,10 +117,10 @@
<span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
</ng-container>
</span>
</div>
</span>
<span class="item-details">{{ s.deletionDate | date }}</span>
</div>
</a>
</span>
</button>
</div>
<div class="no-items" *ngIf="!filteredSends.length">
<i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>

18
src/app/vault/add-edit-custom-fields.component.html
View File

@ -10,15 +10,14 @@
*ngFor="let f of cipher.fields; let i = index; trackBy: trackByFunction"
[ngClass]="{ 'box-content-row-checkbox': f.type === fieldType.Boolean }"
>
<a
href="#"
<button
type="button"
appStopClick
(click)="removeField(f)"
appA11yTitle="{{ 'remove' | i18n }}"
role="button"
>
<i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
</a>
</button>
<label for="fieldName{{ i }}" class="sr-only">{{ "name" | i18n }}</label>
<label for="fieldValue{{ i }}" class="sr-only">{{ "value" | i18n }}</label>
<div class="row-main">
@ -78,12 +77,11 @@
class="action-buttons"
*ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)"
>
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="f.showValue"
(click)="toggleFieldValue(f)"
@ -93,7 +91,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !f.showValue, 'bwi-eye-slash': f.showValue }"
></i>
</a>
</button>
</div>
<div class="drag-handle" appA11yTitle="{{ 'dragToSort' | i18n }}" cdkDragHandle>
<i class="bwi bwi-hamburger" aria-hidden="true"></i>
@ -102,10 +100,10 @@
</div>
<!-- Add new custom field -->
<div class="box-content-row" appBoxRow>
<a href="#" appStopClick (click)="addField()" role="button">
<button type="button" appStopClick (click)="addField()">
<i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
{{ "newCustomField" | i18n }}
</a>
</button>
<label for="addFieldType" class="sr-only">{{ "type" | i18n }}</label>
<select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
<option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{ o.name }}</option>

75
src/app/vault/add-edit.component.html
View File

@ -87,12 +87,11 @@
aria-hidden="true"
></i>
</button>
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -102,18 +101,17 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
<a
</button>
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'generatePassword' | i18n }}"
(click)="generatePassword()"
>
<i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" appBoxRow>
@ -153,12 +151,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showCardNumber"
(click)="toggleCardNumber()"
@ -168,7 +165,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showCardNumber, 'bwi-eye-slash': showCardNumber }"
></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" appBoxRow>
@ -208,12 +205,11 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showCardCode"
(click)="toggleCardCode()"
@ -223,7 +219,7 @@
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showCardCode, 'bwi-eye-slash': showCardCode }"
></i>
</a>
</button>
</div>
</div>
</div>
@ -406,9 +402,14 @@
appBoxRow
*ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
>
<a href="#" appStopClick (click)="removeUri(u)" appA11yTitle="{{ 'remove' | i18n }}">
<i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true" role="button"></i>
</a>
<button
type="button"
appStopClick
(click)="removeUri(u)"
appA11yTitle="{{ 'remove' | i18n }}"
>
<i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
</button>
<div class="row-main">
<label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
<input
@ -435,31 +436,29 @@
</select>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'toggleOptions' | i18n }}"
(click)="toggleUriOptions(u)"
>
<i class="bwi bwi-lg bwi-cog" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
</ng-container>
<a
href="#"
<button
type="button"
appStopClick
appBlurClick
(click)="addUri()"
class="box-content-row"
role="button"
>
<i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
{{ "newUri" | i18n }}
</a>
</button>
</div>
</div>
<div class="box">
@ -477,9 +476,13 @@
<div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="canUseReprompt">
<label for="passwordPrompt"
>{{ "passwordPrompt" | i18n }}
<a href="#" appA11yTitle="{{ 'learnMore' | i18n }}" (click)="openHelpReprompt()">
<button
type="button"
appA11yTitle="{{ 'learnMore' | i18n }}"
(click)="openHelpReprompt()"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</button>
</label>
<input
id="passwordPrompt"
@ -489,30 +492,28 @@
(change)="repromptChanged()"
/>
</div>
<a
<button
type="button"
class="box-content-row box-content-row-flex text-default"
href="#"
appStopClick
appBlurClick
(click)="attachments()"
*ngIf="editMode && !cloneMode"
role="button"
>
<div class="row-main">{{ "attachments" | i18n }}</div>
<i class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>
</a>
<a
</button>
<button
type="button"
class="box-content-row box-content-row-flex text-default"
href="#"
appStopClick
appBlurClick
(click)="editCollections()"
*ngIf="editMode && !cloneMode && cipher.organizationId"
role="button"
>
<div class="row-main">{{ "collections" | i18n }}</div>
<i class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box">

7
src/app/vault/ciphers.component.html
View File

@ -6,14 +6,15 @@
*ngIf="ciphers.length"
>
<div class="list">
<a
<button
type="button"
*cdkVirtualFor="let c of ciphers; trackBy: trackByFn"
appStopClick
(click)="selectCipher(c)"
(contextmenu)="rightClickCipher(c)"
href="#"
title="{{ 'viewItem' | i18n }}"
[ngClass]="{ active: c.id === activeCipherId }"
[attr.aria-pressed]="c.id === activeCipherId"
class="flex-list-item virtual-scroll-item"
>
<app-vault-icon [cipher]="c"></app-vault-icon>
@ -39,7 +40,7 @@
</span>
<span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
</div>
</a>
</button>
</div>
</cdk-virtual-scroll-viewport>
<div class="no-items" *ngIf="!ciphers.length">

91
src/app/vault/groupings.component.html
View File

@ -3,44 +3,86 @@
<h2 class="sr-only">{{ "filters" | i18n }}</h2>
<ul>
<li [ngClass]="{ active: selectedAll }">
<a href="#" appStopClick appBlurClick (click)="selectAll()">
<button
type="button"
[attr.aria-pressed]="selectedAll"
appStopClick
appBlurClick
(click)="selectAll()"
>
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
</a>
</button>
</li>
<li [ngClass]="{ active: selectedFavorites }">
<a href="#" appStopClick appBlurClick (click)="selectFavorites()">
<button
type="button"
[attr.aria-pressed]="selectedFavorites"
appStopClick
appBlurClick
(click)="selectFavorites()"
>
<i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
</a>
</button>
</li>
<li [ngClass]="{ active: selectedTrash }">
<a href="#" appStopClick appBlurClick (click)="selectTrash()">
<button
type="button"
[attr.aria-pressed]="selectedTrash"
appStopClick
appBlurClick
(click)="selectTrash()"
>
<i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
</a>
</button>
</li>
</ul>
<h2>{{ "types" | i18n }}</h2>
<ul>
<li [ngClass]="{ active: selectedType === cipherType.Login }">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
<button
type="button"
[attr.aria-pressed]="selectedType === cipherType.Login"
appStopClick
appBlurClick
(click)="selectType(cipherType.Login)"
>
<i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
</a>
</button>
</li>
<li [ngClass]="{ active: selectedType === cipherType.Card }">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
<button
type="button"
[attr.aria-pressed]="selectedType === cipherType.Card"
appStopClick
appBlurClick
(click)="selectType(cipherType.Card)"
>
<i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
</a>
</button>
</li>
<li [ngClass]="{ active: selectedType === cipherType.Identity }">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
<button
type="button"
[attr.aria-pressed]="selectedType === cipherType.Identity"
appStopClick
appBlurClick
(click)="selectType(cipherType.Identity)"
>
<i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
</a>
</button>
</li>
<li [ngClass]="{ active: selectedType === cipherType.SecureNote }">
<a href="#" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)">
<button
type="button"
[attr.aria-pressed]="selectedType === cipherType.SecureNote"
appStopClick
appBlurClick
(click)="selectType(cipherType.SecureNote)"
>
<i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
"typeSecureNote" | i18n
}}
</a>
</button>
</li>
</ul>
<p *ngIf="!loaded" class="text-muted">{{ "loading" | i18n }}</p>
@ -57,7 +99,13 @@
*ngFor="let f of folders"
[ngClass]="{ active: selectedFolder && f.node.id === selectedFolderId }"
>
<a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
<button
type="button"
[attr.aria-pressed]="selectedFolder && f.node.id === selectedFolderId"
appStopClick
appBlurClick
(click)="selectFolder(f.node)"
>
<i
*ngIf="f.children.length"
class="bwi bwi-fw"
@ -86,7 +134,7 @@
>
<i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
</span>
</a>
</button>
<ul class="bwi-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
<ng-container
*ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }"
@ -107,7 +155,14 @@
*ngFor="let c of collections"
[ngClass]="{ active: c.node.id === selectedCollectionId }"
>
<a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
<button
*ngIf="c.children.length == 0"
type="button"
[attr.aria-pressed]="c.node.id === selectedCollectionId"
appStopClick
appBlurClick
(click)="selectCollection(c.node)"
>
<i
*ngIf="c.children.length"
class="bwi bwi-fw"
@ -126,7 +181,7 @@
aria-hidden="true"
></i>
&nbsp;{{ c.node.name }}
</a>
</button>
<ul class="bwi-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
<ng-container
*ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"

7
src/app/vault/password-generator-history.component.html
View File

@ -17,16 +17,15 @@
<span class="detail">{{ h.date | date: "medium" }}</span>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyPassword' | i18n }}"
(click)="copy(h.password)"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" *ngIf="!history.length">

7
src/app/vault/password-history.component.html
View File

@ -15,16 +15,15 @@
<span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyPassword' | i18n }}"
(click)="copy(h.password)"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" *ngIf="!history.length">

14
src/app/vault/view-custom-fields.component.html
View File

@ -35,24 +35,23 @@
</div>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
*ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
(click)="toggleFieldValue(field)"
role="button"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !field.showValue, 'bwi-eye-slash': field.showValue }"
></i>
</a>
<a
</button>
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyValue' | i18n }}"
*ngIf="
@ -64,10 +63,9 @@
(click)="
copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')
"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
</div>

83
src/app/vault/view.component.html
View File

@ -22,16 +22,15 @@
{{ cipher.login.username }}
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyUsername' | i18n }}"
(click)="copy(cipher.login.username, 'username', 'Username')"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
@ -74,31 +73,29 @@
aria-hidden="true"
></i>
</button>
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
role="button"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
></i>
</a>
<a
</button>
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyPassword' | i18n }}"
(click)="copy(cipher.login.password, 'password', 'Password')"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div
@ -131,16 +128,15 @@
</svg>
</span>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyValue' | i18n }}"
(click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
</div>
@ -157,31 +153,29 @@
<span *ngIf="showCardNumber" class="monospaced">{{ cipher.card.number }}</span>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showCardNumber"
(click)="toggleCardNumber()"
role="button"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showCardNumber, 'bwi-eye-slash': showCardNumber }"
></i>
</a>
<a
</button>
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyNumber' | i18n }}"
(click)="copy(cipher.card.number, 'number', 'Card Number')"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" *ngIf="cipher.card.brand">
@ -199,31 +193,29 @@
<span *ngIf="showCardCode" class="monospaced">{{ cipher.card.code }}</span>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showCardCode"
(click)="toggleCardCode()"
role="button"
>
<i
class="bwi bwi-lg"
aria-hidden="true"
[ngClass]="{ 'bwi-eye': !showCardCode, 'bwi-eye-slash': showCardCode }"
></i>
</a>
<a
</button>
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copySecurityCode' | i18n }}"
(click)="copy(cipher.card.code, 'securityCode', 'Security Code')"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
</div>
@ -289,27 +281,25 @@
<span title="{{ u.uri }}">{{ u.hostOrUri }}</span>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'launch' | i18n }}"
*ngIf="u.canLaunch"
(click)="launch(u)"
role="button"
>
<i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
</a>
<a
</button>
<button
type="button"
class="row-btn"
href="#"
appStopClick
appA11yTitle="{{ 'copyUri' | i18n }}"
(click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')"
role="button"
>
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
</div>
@ -334,10 +324,10 @@
{{ "attachments" | i18n }}
</div>
<div class="box-content">
<a
<button
type="button"
class="box-content-row box-content-row-flex text-default"
*ngFor="let attachment of cipher.attachments"
href="#"
appStopClick
appBlurCLick
(click)="downloadAttachment(attachment)"
@ -354,7 +344,7 @@
*ngIf="attachment.downloading"
aria-hidden="true"
></i>
</a>
</button>
</div>
</div>
<div class="box">
@ -369,15 +359,14 @@
</div>
<div *ngIf="cipher.hasPasswordHistory">
<b class="font-weight-semibold">{{ "passwordHistory" | i18n }}:</b>
<a
href="#"
<button
type="button"
(click)="viewHistory()"
appStopClick
role="button"
appA11yTitle="{{ 'passwordHistory' | i18n }}, {{ cipher.passwordHistory.length }}"
>
<span aria-hidden="true">{{ cipher.passwordHistory.length }}</span>
</a>
</button>
</div>
</div>
</div>

3
src/scss/base.scss
View File

@ -84,6 +84,9 @@ button {
}
button {
border: none;
background: transparent;
color: inherit;
white-space: nowrap;
cursor: pointer;
}

7
src/scss/box.scss
View File

@ -105,9 +105,11 @@
.box-content-row {
display: block;
width: 100%;
padding: 10px 15px;
position: relative;
z-index: 1;
text-align: left;
&:before {
content: "";
@ -232,7 +234,8 @@
margin-top: 5px;
}
> a {
> a,
> button {
padding: 8px 8px 8px 4px;
margin: 0;
@ -366,7 +369,7 @@
&:not(.box-draggable-row) {
.action-buttons .row-btn:last-child {
padding-right: 2px !important;
margin-right: -6px !important;
}
}

19
src/scss/list.scss
View File

@ -1,10 +1,8 @@
@import "variables.scss";
.list > a {
display: block;
.list > button {
padding: 3px 10px;
text-decoration: none;
position: relative;
user-select: none;
z-index: 1;
@ -105,11 +103,14 @@
}
}
.list > a.flex-list-item {
.list > button.flex-list-item {
display: flex;
align-items: center;
width: 100%;
text-align: left;
.item-icon {
display: block;
margin-left: -5px;
margin-right: 4px;
@include themify($themes) {
@ -118,7 +119,9 @@
}
.item-content {
display: block;
.item-title {
display: block;
.title-badges {
@include themify($themes) {
color: themed("mutedColor");
@ -135,12 +138,12 @@
}
.flex-cipher-list-item {
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
> * {
text-align: left;
}
}
}

31
src/scss/vault.scss
View File

@ -129,7 +129,7 @@ app-root {
ul.bwi-ul {
// Level 1
li {
> a {
> button {
padding-left: 12px;
}
@ -137,14 +137,14 @@ app-root {
left: -4px;
}
&.active > a .bwi-li {
&.active > button .bwi-li {
left: 11px;
}
}
// Level 2
ul li {
> a {
> button {
padding-left: 23px;
}
@ -152,14 +152,14 @@ app-root {
left: 7px;
}
&.active > a .bwi-li {
&.active > button .bwi-li {
left: 22px;
}
}
// Level 3
ul ul li {
> a {
> button {
padding-left: 34px;
}
@ -167,14 +167,14 @@ app-root {
left: 18px;
}
&.active > a .bwi-li {
&.active > button .bwi-li {
left: 33px;
}
}
// Level 4
ul ul ul li {
> a {
> button {
padding-left: 45px;
}
@ -182,14 +182,14 @@ app-root {
left: 29px;
}
&.active > a .bwi-li {
&.active > button .bwi-li {
left: 44px;
}
}
// Level 5
ul ul ul ul li {
> a {
> button {
padding-left: 56px;
}
@ -197,14 +197,14 @@ app-root {
left: 40px;
}
&.active > a .bwi-li {
&.active > button .bwi-li {
left: 55px;
}
}
// Level 6
ul ul ul ul ul li {
> a {
> button {
padding-left: 67px;
}
@ -212,14 +212,14 @@ app-root {
left: 51px;
}
&.active > a .bwi-li {
&.active > button .bwi-li {
left: 66px;
}
}
// Level 7
ul ul ul ul ul ul li {
> a {
> button {
padding-left: 78px;
}
@ -227,7 +227,7 @@ app-root {
left: 62px;
}
&.active > a .bwi-li {
&.active > button .bwi-li {
left: 77px;
}
}
@ -238,10 +238,11 @@ app-root {
margin: 0;
li {
a {
button {
padding: 5px 0;
display: flex;
align-items: center;
width: 100%;
@include themify($themes) {
color: themed("textColor");