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

[PS-540] Accessibility: remove `appBlurClick`, add `aria-expanded` to cog options, links to buttons, fix unsufficient focus indication (#1514)

This commit is contained in:
Patrick H. Lauke 2022-05-05 15:36:46 +01:00 committed by GitHub
parent 817856bc82
commit 55a9403ee3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 47 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -34,7 +34,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -58,17 +57,16 @@
type="button"
class="btn block"
[ngClass]="{ 'primary font-weight-bold': hideInput }"
appBlurClick
(click)="unlockBiometric()"
>
{{ biometricText | i18n }}
</button>
</div>
<div class="buttons-row">
<button type="submit" class="btn primary block" appBlurClick *ngIf="!hideInput">
<button type="submit" class="btn primary block" *ngIf="!hideInput">
<i class="bwi bwi-unlock" aria-hidden="true"></i> <b>{{ "unlock" | i18n }}</b>
</button>
<button type="button" class="btn block" appBlurClick (click)="logOut()">
<button type="button" class="btn block" (click)="logOut()">
{{ "logOut" | i18n }}
</button>
</div>

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

@ -52,7 +52,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -76,15 +75,15 @@
</div>
<div class="buttons with-rows">
<div class="buttons-row">
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
<button type="submit" class="btn primary block" [disabled]="form.loading">
<b [hidden]="form.loading"
><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }}</b
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a role="button" tabindex="0" routerLink="/register" class="btn block">
<button type="button" routerLink="/register" class="btn block">
<i class="bwi bwi-pencil-square" aria-hidden="true"></i> {{ "createAccount" | i18n }}
</a>
</button>
</div>
<div class="buttons-row">
<button
@ -97,7 +96,7 @@
</div>
</div>
<div class="sub-options">
<a role="button" tabindex="0" routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
<button type="button" routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</button>
</div>
</div>
</form>

4
src/app/accounts/premium.component.html
View File

@ -48,14 +48,13 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="primary" appBlurClick (click)="manage()" *ngIf="isPremium">
<button type="button" class="primary" (click)="manage()" *ngIf="isPremium">
<b>{{ "premiumManage" | i18n }}</b>
</button>
<button
#purchaseBtn
type="button"
class="primary"
appBlurClick
(click)="purchase()"
*ngIf="!isPremium"
[disabled]="purchaseBtn.loading"
@ -67,7 +66,6 @@
<button
#refreshBtn
type="button"
appBlurClick
(click)="refresh()"
[disabled]="refreshBtn.loading"
appA11yTitle="{{ 'premiumRefresh' | i18n }}"

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

@ -44,7 +44,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(false)"
@ -94,7 +93,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(true)"
@ -140,11 +138,11 @@
</div>
</div>
<div class="buttons">
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
<button type="submit" class="btn primary block" [disabled]="form.loading">
<b [hidden]="form.loading">{{ "submit" | i18n }}</b>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
<button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
</div>
</div>
</form>

2
src/app/accounts/remove-password.component.html
View File

@ -7,7 +7,6 @@
type="submit"
class="btn primary block"
[disabled]="actionPromise"
appBlurClick
(click)="convert()"
>
<b [hidden]="continuing">{{ "removeMasterPassword" | i18n }}</b>
@ -17,7 +16,6 @@
type="button"
class="btn secondary block"
[disabled]="actionPromise"
appBlurClick
(click)="leave()"
>
<b [hidden]="leaving">{{ "leaveOrganization" | i18n }}</b>

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

@ -60,7 +60,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(false)"
@ -112,7 +111,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(true)"

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

@ -112,7 +112,6 @@
type="submit"
class="btn primary block"
[disabled]="form.loading"
appBlurClick
*ngIf="
selectedProviderType != null &&
selectedProviderType !== providerType.Duo &&
@ -124,7 +123,7 @@
>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
<a role="button" tabindex="0" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</a>
<button type="button" routerLink="/login" class="btn block">{{ "cancel" | i18n }}</button>
</div>
<div class="sub-options">
<button type="button" appStopClick (click)="anotherMethod()">

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

@ -40,7 +40,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(false)"
@ -87,7 +86,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword(true)"
@ -114,7 +112,7 @@
</div>
</div>
<div class="buttons">
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
<button type="submit" class="btn primary block" [disabled]="form.loading">
<b [hidden]="form.loading">{{ "submit" | i18n }}</b>
<i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>

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

@ -23,7 +23,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -43,7 +42,7 @@
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" appBlurClick>
<button type="submit" class="btn btn-primary btn-submit">
<span>{{ "ok" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

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

@ -26,7 +26,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPin"
(click)="toggleVisibility()"

12
src/app/layout/nav.component.html
View File

@ -1,5 +1,13 @@
<ng-container *ngFor="let item of items">
<a [routerLink]="item.link" class="btn primary" routerLinkActive="active" [title]="item.label">
<button
type="button"
[routerLink]="item.link"
class="btn primary"
routerLinkActive="active"
[title]="item.label"
#rla="routerLinkActive"
[attr.aria-pressed]="rla.isActive"
>
<i class="bwi" [ngClass]="item.icon"></i>{{ item.label }}
</a>
</button>
</ng-container>

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

@ -97,7 +97,6 @@
type="button"
class="toggle"
appStopClick
appBlurClick
(click)="toggleOptions()"
[attr.aria-expanded]="showOptions"
>
@ -161,7 +160,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePasswordVisible()"
@ -253,7 +251,6 @@
</div>
<div class="footer">
<button
appBlurClick
type="submit"
class="primary btn-submit"
appA11yTitle="{{ 'save' | i18n }}"
@ -263,12 +260,11 @@
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span><i class="bwi bwi-save-changes bwi-lg bwi-fw" aria-hidden="true"></i></span>
</button>
<button appBlurClick type="button" (click)="cancel()" [disabled]="form.loading">
<button type="button" (click)="cancel()" [disabled]="form.loading">
{{ "cancel" | i18n }}
</button>
<div class="right">
<button
appBlurClick
type="button"
(click)="copyLinkToClipboard(link)"
appA11yTitle="{{ 'copySendLinkToClipboard' | i18n }}"
@ -278,7 +274,6 @@
</button>
<button
#deleteBtn
appBlurClick
type="button"
(click)="delete()"
class="danger"

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

@ -8,7 +8,6 @@
<button
type="button"
appStopClick
appBlurClick
(click)="selectAll()"
[attr.aria-pressed]="selectedAll"
>
@ -22,7 +21,6 @@
<button
type="button"
appStopClick
appBlurClick
(click)="selectType(sendType.Text)"
[attr.aria-pressed]="selectedType === sendType.Text"
>
@ -35,7 +33,6 @@
<button
type="button"
appStopClick
appBlurClick
(click)="selectType(sendType.File)"
[attr.aria-pressed]="selectedType === sendType.File"
>
@ -131,12 +128,7 @@
</div>
</div>
<div class="footer">
<button
appBlurClick
(click)="addSend()"
class="block primary"
appA11yTitle="{{ 'addItem' | i18n }}"
>
<button (click)="addSend()" class="block primary" appA11yTitle="{{ 'addItem' | i18n }}">
<i class="bwi bwi-plus bwi-lg" aria-hidden="true"></i>
</button>
</div>

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

@ -81,7 +81,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="f.showValue"
(click)="toggleFieldValue(f)"

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

@ -39,17 +39,15 @@
/>
</div>
<div class="action-buttons">
<a
<button
type="button"
class="row-btn"
href="#"
appStopClick
appBlurClick
role="button"
appA11yTitle="{{ 'generateUsername' | i18n }}"
(click)="generateUsername()"
>
<i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row box-content-row-flex" appBoxRow>
@ -70,7 +68,6 @@
type="button"
#checkPasswordBtn
class="row-btn btn"
appBlurClick
appA11yTitle="{{ 'checkPassword' | i18n }}"
(click)="checkPassword()"
[appApiAction]="checkPasswordPromise"
@ -91,7 +88,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showPassword"
(click)="togglePassword()"
@ -106,7 +102,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'generatePassword' | i18n }}"
(click)="generatePassword()"
>
@ -155,7 +150,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showCardNumber"
(click)="toggleCardNumber()"
@ -209,7 +203,6 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
[attr.aria-pressed]="showCardCode"
(click)="toggleCardCode()"
@ -440,22 +433,18 @@
type="button"
class="row-btn"
appStopClick
appBlurClick
appA11yTitle="{{ 'toggleOptions' | i18n }}"
(click)="toggleUriOptions(u)"
[attr.aria-expanded]="
!(u.showOptions === false || (u.showOptions == null && u.match == null))
"
>
<i class="bwi bwi-lg bwi-cog" aria-hidden="true"></i>
</button>
</div>
</div>
</ng-container>
<button
type="button"
appStopClick
appBlurClick
(click)="addUri()"
class="box-content-row"
>
<button type="button" appStopClick (click)="addUri()" class="box-content-row">
<i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
{{ "newUri" | i18n }}
</button>
@ -496,7 +485,6 @@
type="button"
class="box-content-row box-content-row-flex text-default"
appStopClick
appBlurClick
(click)="attachments()"
*ngIf="editMode && !cloneMode"
>
@ -507,7 +495,6 @@
type="button"
class="box-content-row box-content-row-flex text-default"
appStopClick
appBlurClick
(click)="editCollections()"
*ngIf="editMode && !cloneMode && cipher.organizationId"
>
@ -578,7 +565,6 @@
</div>
<div class="footer">
<button
appBlurClick
type="submit"
class="primary"
appA11yTitle="{{ 'save' | i18n }}"
@ -591,12 +577,11 @@
aria-hidden="true"
></i>
</button>
<button appBlurClick type="button" (click)="cancel()">
<button type="button" (click)="cancel()">
{{ "cancel" | i18n }}
</button>
<div class="right">
<button
appBlurClick
type="button"
(click)="share()"
appA11yTitle="{{ 'moveToOrganization' | i18n }}"
@ -606,7 +591,6 @@
</button>
<button
#deleteBtn
appBlurClick
type="button"
(click)="delete()"
class="danger"

2
src/app/vault/attachments.component.html
View File

@ -17,7 +17,6 @@
class="row-btn btn"
type="button"
appStopClick
appBlurClick
appA11yTitle="{{ 'delete' | i18n }}"
(click)="delete(a)"
#deleteBtn
@ -56,7 +55,6 @@
</div>
<div class="modal-footer">
<button
appBlurClick
type="submit"
class="primary"
appA11yTitle="{{ 'save' | i18n }}"

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

@ -54,7 +54,6 @@
</div>
<div class="footer">
<button
appBlurClick
(click)="addCipher()"
(contextmenu)="addCipherOptions()"
class="block primary"

1
src/app/vault/collections.component.html
View File

@ -28,7 +28,6 @@
</div>
<div class="modal-footer">
<button
appBlurClick
type="submit"
class="primary"
appA11yTitle="{{ 'save' | i18n }}"

1
src/app/vault/export.component.html
View File

@ -31,7 +31,6 @@
</div>
<div class="modal-footer">
<button
appBlurClick
type="submit"
class="primary"
appA11yTitle="{{ 'submit' | i18n }}"

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

@ -22,7 +22,6 @@
</div>
<div class="modal-footer">
<button
appBlurClick
type="submit"
class="primary"
appA11yTitle="{{ 'save' | i18n }}"
@ -43,7 +42,6 @@
<div class="right">
<button
#deleteBtn
appBlurClick
type="button"
(click)="delete()"
class="danger"

2
src/app/vault/generator.component.html
View File

@ -326,7 +326,6 @@
<a
href="#"
appStopClick
appBlurClick
(click)="usernameTypesLearnMore()"
appA11yTitle="{{ 'learnMore' | i18n }}"
>
@ -556,7 +555,6 @@
<button
type="button"
class="primary"
appBlurClick
*ngIf="comingFromAddEdit"
(click)="select()"
appA11yTitle="{{ 'select' | i18n }}"

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

@ -3,13 +3,7 @@
<h2 class="sr-only">{{ "filters" | i18n }}</h2>
<ul>
<li [ngClass]="{ active: selectedAll }">
<button
type="button"
[attr.aria-pressed]="selectedAll"
appStopClick
appBlurClick
(click)="selectAll()"
>
<button type="button" [attr.aria-pressed]="selectedAll" appStopClick (click)="selectAll()">
<i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
</button>
</li>
@ -18,7 +12,6 @@
type="button"
[attr.aria-pressed]="selectedFavorites"
appStopClick
appBlurClick
(click)="selectFavorites()"
>
<i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
@ -29,7 +22,6 @@
type="button"
[attr.aria-pressed]="selectedTrash"
appStopClick
appBlurClick
(click)="selectTrash()"
>
<i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
@ -43,7 +35,6 @@
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 }}
@ -54,7 +45,6 @@
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 }}
@ -65,7 +55,6 @@
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 }}
@ -76,7 +65,6 @@
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;{{
@ -89,7 +77,7 @@
<ng-container *ngIf="loaded">
<div class="heading">
<h2>{{ "folders" | i18n }}</h2>
<button appBlurClick (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
<button (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
</button>
</div>
@ -103,7 +91,6 @@
type="button"
[attr.aria-pressed]="selectedFolder && f.node.id === selectedFolderId"
appStopClick
appBlurClick
(click)="selectFolder(f.node)"
>
<i
@ -160,7 +147,6 @@
type="button"
[attr.aria-pressed]="c.node.id === selectedCollectionId"
appStopClick
appBlurClick
(click)="selectCollection(c.node)"
>
<i

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

@ -38,7 +38,6 @@
<button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
<div class="right">
<button
appBlurClick
type="button"
(click)="clear()"
class="danger"

1
src/app/vault/share.component.html
View File

@ -54,7 +54,6 @@
</div>
<div class="modal-footer">
<button
appBlurClick
type="submit"
class="primary"
appA11yTitle="{{ 'save' | i18n }}"

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

@ -56,7 +56,6 @@
type="button"
#checkPasswordBtn
class="row-btn btn"
appBlurClick
appA11yTitle="{{ 'checkPassword' | i18n }}"
(click)="checkPassword()"
[appApiAction]="checkPasswordPromise"
@ -333,7 +332,6 @@
class="box-content-row box-content-row-flex text-default"
*ngFor="let attachment of cipher.attachments"
appStopClick
appBlurCLick
(click)="downloadAttachment(attachment)"
>
<span class="row-main">{{ attachment.fileName }}</span>
@ -378,7 +376,6 @@
</div>
<div class="footer" *ngIf="cipher">
<button
appBlurClick
class="primary"
(click)="edit()"
appA11yTitle="{{ 'edit' | i18n }}"
@ -387,7 +384,6 @@
<i class="bwi bwi-pencil bwi-fw bwi-lg" aria-hidden="true"></i>
</button>
<button
appBlurClick
class="primary"
(click)="restore()"
appA11yTitle="{{ 'restore' | i18n }}"
@ -396,7 +392,6 @@
<i class="bwi bwi-undo bwi-fw bwi-lg" aria-hidden="true"></i>
</button>
<button
appBlurClick
class="primary"
*ngIf="!cipher?.organizationId && !cipher.isDeleted"
(click)="clone()"
@ -406,7 +401,6 @@
</button>
<div class="right">
<button
appBlurClick
type="button"
(click)="delete()"
class="danger"

1
src/scss/buttons.scss
View File

@ -53,7 +53,6 @@
&:focus:not([disabled]) {
cursor: pointer;
outline: 0;
@include themify($themes) {
background-color: darken(themed("buttonBackgroundColor"), 6%);

18
src/scss/vault.scss
View File

@ -363,6 +363,16 @@ app-root {
flex-direction: column;
height: 100%;
}
.footer {
button {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
}
}
> .logo {
@ -414,14 +424,6 @@ app-root {
border-top-color: themed("borderColor");
}
button {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
.right {
margin-left: auto;
display: flex;