ally title work

2026-01-06 10:33:17 +00:00 · 2019-10-11 10:35:24 -04:00
parent 9ebd700317
commit 9c2f128585
79 changed files with 407 additions and 278 deletions
--- a/src/app/organizations/manage/collection-add-edit.component.html
+++ b/src/app/organizations/manage/collection-add-edit.component.html
@@ -8,7 +8,8 @@
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <div class="form-group">
@@ -51,8 +52,11 @@
                                </td>
                                <td (click)="check(g)">
                                    {{g.name}}
-                                    <i class="fa fa-th text-muted fa-fw" *ngIf="g.accessAll"
-                                        title="This group can access all items"></i>
+                                    <ng-container *ngIf="g.accessAll">
+                                        <i class="fa fa-th text-muted fa-fw" title="{{'groupAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'groupAccessAllItems' | i18n}}</span>
+                                    </ng-container>
                                </td>
                                <td class="text-center">
                                    <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly"
@@ -65,18 +69,18 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                <div class="ml-auto">
                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        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-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"
-                            title="{{'loading' | i18n}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
--- a/src/app/organizations/manage/entity-events.component.html
+++ b/src/app/organizations/manage/entity-events.component.html
@@ -11,7 +11,8 @@
                </button>
            </div>
            <div class="modal-body" *ngIf="!loaded">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="loaded">
                <div class="d-flex">
@@ -50,10 +51,12 @@
                        <tr *ngFor="let e of events">
                            <td>{{e.date | date:'medium'}}</td>
                            <td>
-                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                            </td>
                            <td *ngIf="showUser">
-                                <span title="{{e.userEmail}}">{{e.userName}}</span>
+                                <span appA11yTitle="{{e.userEmail}}">{{e.userName}}</span>
                            </td>
                            <td [innerHTML]="e.message"></td>
                        </tr>
@@ -61,7 +64,7 @@
                </table>
                <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
                    (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'loadMore' | i18n}}</span>
                </button>
            </div>
--- a/src/app/organizations/manage/entity-users.component.html
+++ b/src/app/organizations/manage/entity-users.component.html
@@ -11,7 +11,8 @@
                </button>
            </div>
            <div class="modal-body" *ngIf="loading || !users">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body"
                *ngIf="!loading && users && (users | search:searchText:'name':'email':'id') as searchedUsers">
@@ -72,7 +73,10 @@
                                    <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                                </td>
                                <td *ngIf="entity === 'collection'">
-                                    <i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i>
+                                    <ng-container *ngIf="u.accessAll">
+                                        <i class="fa fa-th" title="{{'userAccessAllItems' | i18n}}"></i>
+                                        <span class="sr-only">{{'userAccessAllItems' | i18n}}</span>
+                                    </ng-container>
                                </td>
                                <td>
                                    <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
@@ -91,7 +95,7 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
--- a/src/app/organizations/manage/events.component.html
+++ b/src/app/organizations/manage/events.component.html
@@ -17,7 +17,10 @@
        </button>
    </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!loaded">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="loaded">
    <p *ngIf="!events || !events.length">{{'noEventsInList' | i18n}}</p>
    <table class="table table-hover" *ngIf="events && events.length">
@@ -35,7 +38,8 @@
            <tr *ngFor="let e of events">
                <td>{{e.date | date:'medium'}}</td>
                <td>
-                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                </td>
                <td>
                    <span title="{{e.userEmail}}">{{e.userName}}</span>
@@ -46,7 +50,7 @@
    </table>
    <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
        (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
        <span>{{'loadMore' | i18n}}</span>
    </button>
 </ng-container>
--- a/src/app/organizations/manage/group-add-edit.component.html
+++ b/src/app/organizations/manage/group-add-edit.component.html
@@ -8,7 +8,8 @@
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <div class="form-group">
@@ -81,17 +82,17 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                <div class="ml-auto">
                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        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 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"
                            title="{{'loading' | i18n}}"></i>
                    </button>
                </div>
--- a/src/app/organizations/manage/groups.component.html
+++ b/src/app/organizations/manage/groups.component.html
@@ -12,7 +12,10 @@
        </button>
    </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="!loading && (groups | search:searchText:'name':'id') as searchedGroups">
    <p *ngIf="!searchedGroups.length">{{'noGroupsInList' | i18n}}</p>
    <table class="table table-hover table-list" *ngIf="searchedGroups.length">
--- a/src/app/organizations/manage/people.component.html
+++ b/src/app/organizations/manage/people.component.html
@@ -30,7 +30,10 @@
        </button>
    </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="!loading && (users | search:searchText:'name':'email':'id') as searchedUsers">
    <p *ngIf="!searchedUsers.length">{{'noUsersInList' | i18n}}</p>
    <ng-container *ngIf="searchedUsers.length">
@@ -53,7 +56,10 @@
                        <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                    </td>
                    <td>
-                        <i class="fa fa-lock" *ngIf="u.twoFactorEnabled" title="{{'userUsingTwoStep' | i18n}}"></i>
+                        <ng-container *ngIf="u.twoFactorEnabled">
+                            <i class="fa fa-lock" title="{{'userUsingTwoStep' | i18n}}"></i>
+                            <span class="sr-only">{{'userUsingTwoStep' | i18n}}</span>
+                        </ng-container>
                    </td>
                    <td>
                        <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -11,7 +11,8 @@
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <ng-container *ngIf="!editMode">
@@ -116,18 +117,18 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary"
                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                <div class="ml-auto">
                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        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-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"
-                            title="{{'loading' | i18n}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
--- a/src/app/organizations/manage/user-confirm.component.html
+++ b/src/app/organizations/manage/user-confirm.component.html
@@ -27,7 +27,7 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'confirm' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary"
--- a/src/app/organizations/manage/user-groups.component.html
+++ b/src/app/organizations/manage/user-groups.component.html
@@ -11,7 +11,8 @@
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <p>{{'groupAccessUserDesc' | i18n}}</p>
@@ -33,7 +34,7 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary"
--- a/src/app/organizations/settings/account.component.html
+++ b/src/app/organizations/settings/account.component.html
@@ -2,7 +2,8 @@
    <h1>{{'myOrganization' | i18n}}</h1>
 </div>
 <div *ngIf="loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
    <div class="row">
@@ -27,7 +28,7 @@
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
        <span>{{'save' | i18n}}</span>
    </button>
 </form>
--- a/src/app/organizations/settings/adjust-seats.component.html
+++ b/src/app/organizations/settings/adjust-seats.component.html
@@ -1,6 +1,6 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
    <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" appA11yTitle="{{'cancel' | i18n}}"
            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
        <h3 class="card-body-header">{{(add ? 'addSeats' : 'removeSeats') | i18n}}</h3>
        <div class="row">
@@ -15,7 +15,7 @@
            | currency:'$'}} /{{interval | i18n}}
        </div>
        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
            <span>{{'submit' | i18n}}</span>
        </button>
        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
--- a/src/app/organizations/settings/api-key.component.html
+++ b/src/app/organizations/settings/api-key.component.html
@@ -38,7 +38,7 @@
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
                    *ngIf="!clientSecret">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'viewApiKey' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
--- a/src/app/organizations/settings/change-plan.component.html
+++ b/src/app/organizations/settings/change-plan.component.html
@@ -1,6 +1,6 @@
 <div class="card card-org-plans">
    <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" appA11yTitle="{{'cancel' | i18n}}"
            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
        <h2 class="card-body-header">{{'changeBillingPlan' | i18n}}</h2>
        <p class="mb-0">{{'changeBillingPlanUpgrade' | i18n}}</p>
--- a/src/app/organizations/settings/delete-organization.component.html
+++ b/src/app/organizations/settings/delete-organization.component.html
@@ -16,7 +16,7 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'deleteOrganization' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
--- a/src/app/organizations/settings/download-license.component.html
+++ b/src/app/organizations/settings/download-license.component.html
@@ -1,13 +1,13 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
    <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" appA11yTitle="{{'cancel' | i18n}}"
            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
        <h3 class="card-body-header">{{'downloadLicense' | i18n}}</h3>
        <div class="row">
            <div class="form-group col-6">
                <div class="d-flex">
                    <label for="installationId">{{'enterInstallationId' | i18n}}</label>
-                    <a class="ml-auto" target="_blank" rel="noopener" title="{{'learnMore' | i18n}}"
+                    <a class="ml-auto" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
                        href="https://help.bitwarden.com/article/licensing-on-premise/#organization-account-sharing">
                        <i class="fa fa-question-circle-o"></i>
                    </a>
@@ -17,7 +17,7 @@
            </div>
        </div>
        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
            <span>{{'submit' | i18n}}</span>
        </button>
        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
--- a/src/app/organizations/settings/organization-subscription.component.html
+++ b/src/app/organizations/settings/organization-subscription.component.html
@@ -1,12 +1,16 @@
 <div class="page-header">
    <h1>
        {{'subscription' | i18n}}
-        <small>
-            <i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+        <small *ngIf="firstLoaded && loading">
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
        </small>
    </h1>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!firstLoaded && loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="sub">
    <app-callout type="warning" title="{{'canceled' | i18n}}" *ngIf="subscription && subscription.cancelled">
        {{'subscriptionCanceled' | i18n}}</app-callout>
@@ -14,7 +18,7 @@
        <p>{{'subscriptionPendingCanceled' | i18n}}</p>
        <button #reinstateBtn type="button" class="btn btn-outline-secondary btn-submit" (click)="reinstate()"
            [appApiAction]="reinstatePromise" [disabled]="reinstateBtn.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
            <span>{{'reinstateSubscription' | i18n}}</span>
        </button>
    </app-callout>
@@ -77,7 +81,7 @@
        </div>
        <div class="card mt-3" *ngIf="showUpdateLicense">
            <div class="card-body">
-                <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+                <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}"
                    (click)="closeUpdateLicense(false)"><span aria-hidden="true">&times;</span></button>
                <h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
                <app-update-license [organizationId]="organizationId" (onUpdated)="closeUpdateLicense(true)"
@@ -97,7 +101,7 @@
            <button #cancelBtn type="button" class="btn btn-outline-danger btn-submit ml-auto" (click)="cancel()"
                [appApiAction]="cancelPromise" [disabled]="cancelBtn.loading"
                *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                <span>{{'cancelSubscription' | i18n}}</span>
            </button>
        </div>
--- a/src/app/organizations/settings/rotate-api-key.component.html
+++ b/src/app/organizations/settings/rotate-api-key.component.html
@@ -38,7 +38,7 @@
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
                    *ngIf="!clientSecret">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'rotateApiKey' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -11,8 +11,11 @@
                <h1>
                    {{'vault' | i18n}}
                    <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
-                        <i *ngIf="actionSpinner.loading" class="fa fa-spinner fa-spin text-muted"
-                            title="{{'loading' | i18n}}"></i>
+                        <ng-container *ngIf="actionSpinner.loading">
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
+                        </ng-container>
                    </small>
                </h1>
                <button type="button" class="btn btn-outline-primary btn-sm ml-auto" (click)="addCipher()">