refactor(Auth-Font-Icons): [Auth/PM-31804] Migrate auth font icons to use bit-icon (#18816)

* PM-31804 - WIP

* PM-31804 - Profile Component - fix missing translation

* PM-31804 - Web - Emergency Access Takeover Dialog Comp - remove screen reader only span as arialabel on spinner should be sufficient

* PM-31804 - Web - EmergencyAccessViewComp - remove redundant span as aria label handles accessibility.

* PM-31804 - Web - EmergencyAccessViewComp - Remove redundant sr only span - replaced w/ aria label

* PM-31804 - Web - EmergencyAccessViewComp - Remove redundant sr only span - replaced w/ aria label

* PM-31804 - EmergencyAccessComp - Replace redundant sr only span with aria label

* PM-31804 - two-factor-setup.component.html - Replace redundant sr only spans with aria labels

* PM-31804 - WebauthnLoginSettingsModule - remove unnecessary IconModule - it's imported via SharedModule

* PM-31804 - web - emergency-access.component.html - Replace redundant sr only span with aria label

* PM-31804 - LoginDecryptionOptionsComponent - Replace redundant sr only span with aria label

* PM-31804 - ChangePasswordComp - Replace redundant sr only span with aria label

* PM-31804 - AccountComponent - add BitwardenIcon type to satisfy template type requirements for name property.

* PM-31804 - Browser Account Security Component - replace nonexistent chevron icon with existing angle right icon.

* PM-31804 - Fix A11y issues with missing aria labels

* PM-31804 - Remove remaining redundant sr only spans since we now have aria labels

libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.html

@@ -1,5 +1,5 @@
 <bit-simple-dialog>
-  <i bitDialogIcon class="bwi bwi-info-circle tw-text-info tw-text-3xl" aria-hidden="true"></i>
+  <bit-icon bitDialogIcon name="bwi-info-circle" class="tw-text-info tw-text-3xl"></bit-icon>
   <span bitDialogTitle
     ><strong>{{ "yourAccountsFingerprint" | i18n }}:</strong></span
   >
@@ -16,7 +16,7 @@
       bitDialogClose
     >
       {{ "learnMore" | i18n }}
-      <i class="bwi bwi-external-link bwi-fw" aria-hidden="true"></i>
+      <bit-icon name="bwi-external-link" class="bwi-fw"></bit-icon>
     </a>
     <button bitButton type="button" buttonType="secondary" bitDialogClose>
       {{ "close" | i18n }}

libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.ts

@@ -9,6 +9,7 @@ import {
   DialogModule,
   DialogService,
   CenterPositionStrategy,
+  IconModule,
 } from "@bitwarden/components";
 
 export type FingerprintDialogData = {
@@ -19,7 +20,7 @@ export type FingerprintDialogData = {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "fingerprint-dialog.component.html",
-  imports: [JslibModule, ButtonModule, DialogModule],
+  imports: [JslibModule, ButtonModule, DialogModule, IconModule],
 })
 export class FingerprintDialogComponent {
   constructor(@Inject(DIALOG_DATA) protected data: FingerprintDialogData) {}

libs/auth/src/angular/input-password/input-password.component.html

@@ -149,7 +149,7 @@
         rel="noreferrer"
         appA11yTitle="{{ 'impactOfRotatingYourEncryptionKey' | i18n }}"
       >
-        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+        <bit-icon name="bwi-question-circle"></bit-icon>
       </a>
     </bit-label>
   </bit-form-control>

libs/auth/src/angular/input-password/input-password.component.ts

@@ -29,6 +29,7 @@ import {
   DialogService,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   InputModule,
   LinkModule,
   ToastService,
@@ -112,6 +113,7 @@ interface InputPasswordForm {
     CheckboxModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     InputModule,
     JslibModule,
     PasswordCalloutComponent,

libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html

@@ -1,11 +1,10 @@
 <ng-container *ngIf="loading">
   <div class="tw-text-center">
-    <i
-      class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin bwi-2x tw-text-muted"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
   </div>
 </ng-container>
 

libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts

@@ -53,6 +53,7 @@ import {
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
+  IconModule,
   DialogService,
   FormFieldModule,
   ToastService,
@@ -79,6 +80,7 @@ enum State {
     ButtonModule,
     CheckboxModule,
     CommonModule,
+    IconModule,
     FormFieldModule,
     JslibModule,
     ReactiveFormsModule,

libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="loading">
   <div class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 </ng-container>
 

libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts

@@ -36,7 +36,7 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { UserId } from "@bitwarden/common/types/guid";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { ButtonModule, LinkModule, ToastService } from "@bitwarden/components";
+import { ButtonModule, LinkModule, IconModule, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { AuthRequestApiServiceAbstraction } from "../../common/abstractions/auth-request-api.service";
@@ -60,7 +60,7 @@ const matchOptions: IsActiveMatchOptions = {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "./login-via-auth-request.component.html",
-  imports: [ButtonModule, CommonModule, JslibModule, LinkModule, RouterModule],
+  imports: [ButtonModule, CommonModule, JslibModule, LinkModule, RouterModule, IconModule],
   providers: [{ provide: LoginViaAuthRequestCacheService }],
 })
 export class LoginViaAuthRequestComponent implements OnInit, OnDestroy {

libs/auth/src/angular/login/login.component.html

@@ -65,7 +65,7 @@
           [addTooltipToDescribedby]="ssoRequired"
           [disabled]="ssoRequired"
         >
-          <i class="bwi bwi-passkey tw-mr-1" aria-hidden="true"></i>
+          <bit-icon name="bwi-passkey" class="tw-mr-1"></bit-icon>
           {{ "logInWithPasskey" | i18n }}
         </button>
       </ng-container>
@@ -78,7 +78,7 @@
         [buttonType]="ssoRequired ? 'primary' : 'secondary'"
         (click)="handleSsoClick()"
       >
-        <i class="bwi bwi-provider tw-mr-1" aria-hidden="true"></i>
+        <bit-icon name="bwi-provider" class="tw-mr-1"></bit-icon>
         {{ "useSingleSignOn" | i18n }}
       </button>
     </div>
@@ -114,7 +114,7 @@
           buttonType="secondary"
           (click)="startAuthRequestLogin()"
         >
-          <i class="bwi bwi-mobile" aria-hidden="true"></i>
+          <bit-icon name="bwi-mobile"></bit-icon>
           {{ "loginWithDevice" | i18n }}
         </button>
       </ng-container>

libs/auth/src/angular/login/login.component.ts

@@ -52,6 +52,7 @@ import {
   CheckboxModule,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   LinkModule,
   ToastService,
   TooltipDirective,
@@ -79,6 +80,7 @@ export enum LoginUiState {
     CommonModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     LinkModule,
     JslibModule,
     ReactiveFormsModule,

libs/auth/src/angular/registration/registration-finish/registration-finish.component.html

@@ -1,5 +1,5 @@
 <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
-  <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+  <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
 </div>
 
 <auth-input-password

libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts

@@ -17,7 +17,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
+import { AnonLayoutWrapperDataService, ToastService, IconModule } from "@bitwarden/components";
 
 import {
   LoginStrategyServiceAbstraction,
@@ -43,7 +43,7 @@ type MarketingInitiative = (typeof MarketingInitiative)[keyof typeof MarketingIn
 @Component({
   selector: "auth-registration-finish",
   templateUrl: "./registration-finish.component.html",
-  imports: [CommonModule, JslibModule, RouterModule, InputPasswordComponent],
+  imports: [CommonModule, JslibModule, RouterModule, InputPasswordComponent, IconModule],
 })
 export class RegistrationFinishComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();

libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.html

@@ -16,11 +16,10 @@
       </bit-form-field>
 
       <button bitLink linkType="primary" type="button" (click)="showCustomEnv = !showCustomEnv">
-        <i
-          class="bwi bwi-fw bwi-sm"
-          [ngClass]="{ 'bwi-angle-right': !showCustomEnv, 'bwi-angle-down': showCustomEnv }"
-          aria-hidden="true"
-        ></i>
+        <bit-icon
+          [name]="showCustomEnv ? 'bwi-angle-down' : 'bwi-angle-right'"
+          class="bwi-fw bwi-sm"
+        ></bit-icon>
         {{ "customEnvironment" | i18n }}
       </button>
 
@@ -91,7 +90,7 @@
         aria-live="assertive"
         role="alert"
       >
-        <i class="bwi bwi-error"></i> {{ "selfHostedEnvFormInvalid" | i18n }}
+        <bit-icon name="bwi-error"></bit-icon> {{ "selfHostedEnvFormInvalid" | i18n }}
       </span>
     </ng-container>
     <ng-container bitDialogFooter>

libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.ts

@@ -27,6 +27,7 @@ import {
   DialogModule,
   DialogService,
   FormFieldModule,
+  IconModule,
   LinkModule,
   TypographyModule,
 } from "@bitwarden/components";
@@ -85,6 +86,7 @@ function onlyHttpsValidator(): ValidatorFn {
     JslibModule,
     DialogModule,
     ButtonModule,
+    IconModule,
     LinkModule,
     TypographyModule,
     ReactiveFormsModule,

libs/auth/src/angular/sso/sso.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-container">
   <div *ngIf="loggingIn">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
     {{ "loading" | i18n }}
   </div>
   <div *ngIf="!loggingIn">

libs/auth/src/angular/sso/sso.component.ts

@@ -42,6 +42,7 @@ import {
   CheckboxModule,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   LinkModule,
   ToastService,
 } from "@bitwarden/components";
@@ -73,6 +74,7 @@ interface QueryParams {
     CommonModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     LinkModule,
     JslibModule,
     ReactiveFormsModule,

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html

@@ -1,6 +1,6 @@
 <div id="web-authn-frame" class="tw-mb-3" *ngIf="!webAuthnNewTab">
   <div *ngIf="!webAuthnReady" class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 
   <iframe

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.ts

@@ -22,6 +22,7 @@ import {
   TypographyModule,
   FormFieldModule,
   AsyncActionsModule,
+  IconModule,
   ToastService,
 } from "@bitwarden/components";
 
@@ -48,6 +49,7 @@ export interface WebAuthnResult {
     FormFieldModule,
     AsyncActionsModule,
     FormsModule,
+    IconModule,
   ],
   providers: [],
 })

libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="loading">
   <div class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 </ng-container>
 

libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts

@@ -55,6 +55,7 @@ import {
   DialogService,
   FormFieldModule,
   ToastService,
+  IconModule,
 } from "@bitwarden/components";
 
 import { TwoFactorAuthAuthenticatorComponent } from "./child-components/two-factor-auth-authenticator/two-factor-auth-authenticator.component";
@@ -88,6 +89,7 @@ import {
     AsyncActionsModule,
     CheckboxModule,
     ButtonModule,
+    IconModule,
     TwoFactorAuthAuthenticatorComponent,
     TwoFactorAuthEmailComponent,
     TwoFactorAuthDuoComponent,

libs/auth/src/angular/user-verification/user-verification-form-input.component.html

@@ -46,7 +46,7 @@
         </div>
         <p class="tw-font-medium tw-mb-1">{{ "verifyWithBiometrics" | i18n }}</p>
         <div *ngIf="!biometricsVerificationFailed">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
           {{ "awaitingConfirmation" | i18n }}
         </div>
       </div>
@@ -116,7 +116,7 @@
   </ng-container>
   <ng-container *ngIf="userVerificationOptions.server.otp">
     <div class="tw-mb-6" *ngIf="!sentInitialCode">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
     </div>
 
     <div class="tw-mb-6" *ngIf="sentInitialCode">
@@ -128,7 +128,7 @@
         </button>
 
         <span class="tw-ml-2 tw-text-success" role="alert" @sent *ngIf="sentCode">
-          <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+          <bit-icon name="bwi-check-circle"></bit-icon>
           {{ "codeSent" | i18n }}
         </span>
       </p>

libs/auth/src/angular/user-verification/user-verification-form-input.component.ts

@@ -29,6 +29,7 @@ import {
   FormFieldModule,
   IconButtonModule,
   SvgModule,
+  IconModule,
   LinkModule,
 } from "@bitwarden/components";
 
@@ -64,6 +65,7 @@ import { ActiveClientVerificationOption } from "./active-client-verification-opt
     FormFieldModule,
     AsyncActionsModule,
     IconButtonModule,
+    IconModule,
     SvgModule,
     LinkModule,
     ButtonModule,