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/angular/src/auth/device-management/device-management-table.component.html

@@ -18,7 +18,7 @@
     <!-- Column: Device Name -->
     <td bitCell class="tw-flex tw-gap-2 tw-items-center tw-h-16">
       <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
-        <i [class]="device.icon" class="bwi-lg" aria-hidden="true"></i>
+        <bit-icon [name]="device.icon" class="bwi-lg"></bit-icon>
       </div>
 
       <div>

libs/angular/src/auth/device-management/device-management-table.component.ts

@@ -7,6 +7,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import {
   BadgeModule,
   ButtonModule,
+  IconModule,
   LinkModule,
   TableDataSource,
   TableModule,
@@ -21,7 +22,15 @@ import { DeviceDisplayData } from "./device-management.component";
   standalone: true,
   selector: "auth-device-management-table",
   templateUrl: "./device-management-table.component.html",
-  imports: [BadgeModule, ButtonModule, CommonModule, JslibModule, LinkModule, TableModule],
+  imports: [
+    BadgeModule,
+    ButtonModule,
+    CommonModule,
+    IconModule,
+    JslibModule,
+    LinkModule,
+    TableModule,
+  ],
 })
 export class DeviceManagementTableComponent implements OnChanges {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals

libs/angular/src/auth/device-management/device-management.component.html

@@ -8,7 +8,7 @@
       [bitPopoverTriggerFor]="infoPopover"
       position="right-start"
     >
-      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      <bit-icon name="bwi-question-circle"></bit-icon>
     </button>
 
     <bit-popover [title]="'whatIsADevice' | i18n" #infoPopover>
@@ -23,7 +23,11 @@
 
 @if (initializing) {
   <div class="tw-flex tw-justify-center tw-items-center tw-p-4">
-    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin tw-text-2xl"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
   </div>
 } @else {
   <!-- Table View: displays on medium to large screens -->

libs/angular/src/auth/device-management/device-management.component.ts

@@ -19,7 +19,7 @@ import { DeviceType, DeviceTypeMetadata } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { MessageListener } from "@bitwarden/common/platform/messaging";
-import { ButtonModule, DialogService, PopoverModule } from "@bitwarden/components";
+import { ButtonModule, DialogService, IconModule, PopoverModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import { LoginApprovalDialogComponent } from "../login-approval";
@@ -62,6 +62,7 @@ export interface DeviceDisplayData {
     DeviceManagementItemGroupComponent,
     DeviceManagementTableComponent,
     I18nPipe,
+    IconModule,
     PopoverModule,
   ],
 })

libs/angular/src/auth/environment-selector/environment-selector.component.html

@@ -12,12 +12,12 @@
         [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
         (click)="toggle(region.key)"
       >
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check"
+        <bit-icon
+          name="bwi-check"
+          class="bwi-fw bwi-sm"
           style="padding-bottom: 1px"
-          aria-hidden="true"
           [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
-        ></i>
+        ></bit-icon>
         <span>{{ region.domain }}</span>
       </button>
       <button
@@ -26,12 +26,12 @@
         [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
         (click)="toggle(ServerEnvironmentType.SelfHosted)"
       >
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check"
+        <bit-icon
+          name="bwi-check"
+          class="bwi-fw bwi-sm"
           style="padding-bottom: 1px"
-          aria-hidden="true"
           [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
-        ></i>
+        ></bit-icon>
         <span>{{ "selfHostedServer" | i18n }}</span>
       </button>
     </bit-menu>
@@ -41,7 +41,7 @@
         <b class="tw-text-primary-600 tw-font-medium">{{
           data.selectedRegion?.domain || ("selfHostedServer" | i18n)
         }}</b>
-        <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+        <bit-icon name="bwi-angle-down" class="bwi-fw bwi-sm"></bit-icon>
       </button>
     </div>
   </div>

libs/angular/src/auth/environment-selector/environment-selector.component.ts

@@ -13,6 +13,7 @@ import {
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
   DialogService,
+  IconModule,
   LinkModule,
   MenuModule,
   ToastService,
@@ -26,7 +27,7 @@ import { I18nPipe } from "@bitwarden/ui-common";
   selector: "environment-selector",
   templateUrl: "environment-selector.component.html",
   standalone: true,
-  imports: [CommonModule, I18nPipe, MenuModule, LinkModule, TypographyModule],
+  imports: [CommonModule, I18nPipe, IconModule, LinkModule, MenuModule, TypographyModule],
 })
 export class EnvironmentSelectorComponent implements OnDestroy {
   protected ServerEnvironmentType = Region;

libs/angular/src/auth/login-approval/login-approval-dialog.component.html

@@ -4,7 +4,11 @@
   <ng-container bitDialogContent>
     <ng-container *ngIf="loading">
       <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>
     </ng-container>
 

libs/angular/src/auth/login-approval/login-approval-dialog.component.ts

@@ -20,6 +20,7 @@ import {
   ButtonModule,
   DialogModule,
   DialogService,
+  IconModule,
   ToastService,
 } from "@bitwarden/components";
 import { LogService } from "@bitwarden/logging";
@@ -35,7 +36,7 @@ export interface LoginApprovalDialogParams {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "login-approval-dialog.component.html",
-  imports: [AsyncActionsModule, ButtonModule, CommonModule, DialogModule, JslibModule],
+  imports: [AsyncActionsModule, ButtonModule, CommonModule, DialogModule, IconModule, JslibModule],
 })
 export class LoginApprovalDialogComponent implements OnInit, OnDestroy {
   authRequestId: string;

libs/angular/src/auth/password-management/change-password/change-password.component.html

@@ -1,10 +1,9 @@
 @if (initializing) {
-  <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>
 } @else {
   <bit-callout
     *ngIf="this.forceSetPasswordReason !== ForceSetPasswordReason.AdminForcePasswordReset"

libs/angular/src/auth/password-management/change-password/change-password.component.ts

@@ -23,9 +23,10 @@ import { SyncService } from "@bitwarden/common/platform/sync";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
   AnonLayoutWrapperDataService,
-  DialogService,
-  ToastService,
   CalloutComponent,
+  DialogService,
+  IconModule,
+  ToastService,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -44,7 +45,7 @@ import { ChangePasswordService } from "./change-password.service.abstraction";
 @Component({
   selector: "auth-change-password",
   templateUrl: "change-password.component.html",
-  imports: [InputPasswordComponent, I18nPipe, CalloutComponent, CommonModule],
+  imports: [CalloutComponent, CommonModule, IconModule, InputPasswordComponent, I18nPipe],
 })
 export class ChangePasswordComponent implements OnInit {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals

libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html

@@ -1,10 +1,6 @@
 @if (initializing) {
   <div class="tw-flex tw-items-center tw-justify-center">
-    <i
-      class="bwi bwi-spinner bwi-spin bwi-3x"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 } @else {
   @if (userType === SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER_UNTRUSTED_DEVICE) {

libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts

@@ -37,6 +37,7 @@ import {
   ButtonModule,
   CalloutComponent,
   DialogService,
+  IconModule,
   ToastService,
 } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
@@ -56,7 +57,14 @@ import {
 @Component({
   standalone: true,
   templateUrl: "set-initial-password.component.html",
-  imports: [ButtonModule, CalloutComponent, CommonModule, InputPasswordComponent, I18nPipe],
+  imports: [
+    ButtonModule,
+    CalloutComponent,
+    CommonModule,
+    IconModule,
+    InputPasswordComponent,
+    I18nPipe,
+  ],
 })
 export class SetInitialPasswordComponent implements OnInit {
   protected inputPasswordFlow = InputPasswordFlow.SetInitialPasswordAuthedUser;