From d852a5ff07b6a9d9a9a18a809fc7da3fbbf68160 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Tue, 16 Jul 2024 12:59:04 +0200
Subject: [PATCH] [PM-97089] [Bootstrap] Convert remaining sr-only to
 tw-sr-only (#10094)

We're still using sr-only in multiple places. This is a bootstrap utility class and needs to be migrated to tw-sr-only.
---
 .../manage/group-add-edit.component.html           |  2 +-
 .../organizations/manage/groups.component.html     |  2 +-
 .../organizations/manage/new-groups.component.html |  2 +-
 .../organizations/members/members.component.html   |  2 +-
 .../access-selector/access-selector.component.html |  2 +-
 .../accept-family-sponsorship.component.html       |  2 +-
 .../providers/providers.component.html             |  4 ++--
 .../login-decryption-options.component.html        |  2 +-
 .../accept-organization.component.html             |  2 +-
 .../auth/settings/two-factor-setup.component.html  |  4 ++--
 .../src/app/auth/verify-email-token.component.html |  2 +-
 .../trial-billing-step.component.html              |  2 +-
 .../organization-subscription-cloud.component.html |  2 +-
 ...ganization-subscription-selfhost.component.html |  6 +++---
 apps/web/src/app/tools/generator.component.html    |  2 +-
 .../pages/exposed-passwords-report.component.html  |  4 ++--
 .../inactive-two-factor-report.component.html      |  6 +++---
 .../pages/reused-passwords-report.component.html   |  6 +++---
 .../pages/unsecured-websites-report.component.html |  6 +++---
 .../pages/weak-passwords-report.component.html     |  6 +++---
 apps/web/src/app/tools/send/send.component.html    | 14 +++++++-------
 .../vault-items/vault-cipher-row.component.html    |  4 ++--
 .../add-edit-custom-fields.component.html          |  2 +-
 .../individual-vault/attachments.component.html    |  4 ++--
 .../vault/individual-vault/vault.component.html    |  2 +-
 .../src/app/vault/org-vault/vault.component.html   |  2 +-
 .../domain-verification.component.html             |  2 +-
 .../providers/clients/clients.component.html       |  2 +-
 .../providers/manage/people.component.html         |  4 ++--
 .../providers/manage/user-add-edit.component.html  |  2 +-
 .../providers/setup/setup-provider.component.html  |  2 +-
 .../providers/setup/setup.component.html           |  2 +-
 .../bit-web/src/app/auth/sso/sso.component.ts      |  2 +-
 .../clients/manage-clients.component.html          |  2 +-
 .../provider-payment-method.component.html         |  2 +-
 .../provider-subscription.component.html           |  2 +-
 36 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.html b/apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.html
index eaf10405dbf..3151c303ec9 100644
--- a/apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.html
@@ -13,7 +13,7 @@
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
       </div>
 
       <bit-tab-group *ngIf="!loading" [(selectedIndex)]="tabIndex">
diff --git a/apps/web/src/app/admin-console/organizations/manage/groups.component.html b/apps/web/src/app/admin-console/organizations/manage/groups.component.html
index 1a1a7cdb904..2ebafb38fc9 100644
--- a/apps/web/src/app/admin-console/organizations/manage/groups.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.html
@@ -16,7 +16,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="!loading && visibleGroups">
   <p *ngIf="!visibleGroups.length">{{ "noGroupsInList" | i18n }}</p>
diff --git a/apps/web/src/app/admin-console/organizations/manage/new-groups.component.html b/apps/web/src/app/admin-console/organizations/manage/new-groups.component.html
index 3e659e5b6a8..1254d48cc76 100644
--- a/apps/web/src/app/admin-console/organizations/manage/new-groups.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/new-groups.component.html
@@ -16,7 +16,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="!loading">
   <p *ngIf="!dataSource.filteredData.length">{{ "noGroupsInList" | i18n }}</p>
diff --git a/apps/web/src/app/admin-console/organizations/members/members.component.html b/apps/web/src/app/admin-console/organizations/members/members.component.html
index 64e4b345476..f5b824face6 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.html
@@ -52,7 +52,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="firstLoaded">
   <p *ngIf="!dataSource.filteredData.length">{{ "noMembersInList" | i18n }}</p>
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
index 9077bd747fd..aff5d25ee08 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.component.html
@@ -85,7 +85,7 @@
 
       <td bitCell *ngIf="permissionMode != 'hidden'">
         <ng-container *ngIf="canEditItemPermission(item); else readOnlyPerm">
-          <label class="sr-only" [for]="'permission' + i"
+          <label class="tw-sr-only" [for]="'permission' + i"
             >{{ item.labelName }} {{ "permission" | i18n }}</label
           >
           <div class="tw-relative tw-inline-block">
diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
index e7eb29a3ac7..7640e1c7366 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
@@ -7,7 +7,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </p>
   </div>
 </div>
diff --git a/apps/web/src/app/admin-console/providers/providers.component.html b/apps/web/src/app/admin-console/providers/providers.component.html
index d07342c85c2..560c164415c 100644
--- a/apps/web/src/app/admin-console/providers/providers.component.html
+++ b/apps/web/src/app/admin-console/providers/providers.component.html
@@ -3,7 +3,7 @@
 <bit-container>
   <p *ngIf="!loaded" class="text-muted">
     <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </p>
   <ng-container *ngIf="loaded">
     <table class="table table-hover table-list" *ngIf="providers && providers.length">
@@ -20,7 +20,7 @@
                 title="{{ 'providerIsDisabled' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "providerIsDisabled" | i18n }}</span>
+              <span class="tw-sr-only">{{ "providerIsDisabled" | i18n }}</span>
             </ng-container>
           </td>
         </tr>
diff --git a/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html b/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html
index ed59cc12388..615edb82d0c 100644
--- a/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html
+++ b/apps/web/src/app/auth/login/login-decryption-options/login-decryption-options.component.html
@@ -13,7 +13,7 @@
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
       </p>
     </ng-container>
 
diff --git a/apps/web/src/app/auth/organization-invite/accept-organization.component.html b/apps/web/src/app/auth/organization-invite/accept-organization.component.html
index 04258e7a46a..88eaa37e8d2 100644
--- a/apps/web/src/app/auth/organization-invite/accept-organization.component.html
+++ b/apps/web/src/app/auth/organization-invite/accept-organization.component.html
@@ -7,7 +7,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </p>
   </div>
 </div>
diff --git a/apps/web/src/app/auth/settings/two-factor-setup.component.html b/apps/web/src/app/auth/settings/two-factor-setup.component.html
index 33265e91f78..3595d9a7dcb 100644
--- a/apps/web/src/app/auth/settings/two-factor-setup.component.html
+++ b/apps/web/src/app/auth/settings/two-factor-setup.component.html
@@ -39,7 +39,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </small>
   </h2>
   <bit-callout type="warning" *ngIf="showPolicyWarning">
@@ -64,7 +64,7 @@
               title="{{ 'enabled' | i18n }}"
               aria-hidden="true"
             ></i>
-            <span class="sr-only">{{ "enabled" | i18n }}</span>
+            <span class="tw-sr-only">{{ "enabled" | i18n }}</span>
           </ng-container>
           <app-premium-badge *ngIf="p.premium"></app-premium-badge>
         </h3>
diff --git a/apps/web/src/app/auth/verify-email-token.component.html b/apps/web/src/app/auth/verify-email-token.component.html
index 9e0aad8b384..39a7d4524f8 100644
--- a/apps/web/src/app/auth/verify-email-token.component.html
+++ b/apps/web/src/app/auth/verify-email-token.component.html
@@ -7,7 +7,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </p>
   </div>
 </div>
diff --git a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html
index fb7c774d6db..71a4ff119c2 100644
--- a/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html
+++ b/apps/web/src/app/billing/accounts/trial-initiation/trial-billing-step.component.html
@@ -4,7 +4,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <form
   #form
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 606440f2be6..e519b8887b1 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -3,7 +3,7 @@
 <bit-container *ngIf="!isProviderManaged">
   <ng-container *ngIf="!firstLoaded && loading">
     <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </ng-container>
 
   <app-org-subscription-hidden
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
index 23e5fb80426..383013dd563 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
@@ -3,7 +3,7 @@
 <bit-container>
   <ng-container *ngIf="!firstLoaded && loading">
     <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </ng-container>
 
   <app-org-subscription-hidden
@@ -32,7 +32,7 @@
           rel="noreferrer"
         >
           <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-          <span class="sr-only">{{ "licensePaidFeaturesHelp" | i18n }}</span>
+          <span class="tw-sr-only">{{ "licensePaidFeaturesHelp" | i18n }}</span>
         </a>
       </dt>
       <dd *ngIf="subscription.hasExpiration" [ngClass]="{ 'tw-text-danger': showAsExpired }">
@@ -84,7 +84,7 @@
               rel="noreferrer"
             >
               <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-              <span class="sr-only">{{ "billingSyncHelp" | i18n }}</span>
+              <span class="tw-sr-only">{{ "billingSyncHelp" | i18n }}</span>
             </a>
           </bit-label>
           <bit-hint>
diff --git a/apps/web/src/app/tools/generator.component.html b/apps/web/src/app/tools/generator.component.html
index 4be83c3edb5..f52d1f020d3 100644
--- a/apps/web/src/app/tools/generator.component.html
+++ b/apps/web/src/app/tools/generator.component.html
@@ -126,7 +126,7 @@
             [value]="passwordOptions.length"
           />
           <span
-            class="sr-only"
+            class="tw-sr-only"
             attr.aria-label="{{ 'passwordMinLength' | i18n }}"
             role="status"
             aria-live="polite"
diff --git a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
index 5d2c87bdc47..fd9fc71c07f 100644
--- a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
@@ -59,7 +59,7 @@
                   title="{{ 'shared' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "shared" | i18n }}</span>
+                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
               <ng-container *ngIf="r.hasAttachments">
                 <i
@@ -68,7 +68,7 @@
                   title="{{ 'attachments' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "attachments" | i18n }}</span>
+                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
               <small>{{ r.subTitle }}</small>
diff --git a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
index a757f0edc5e..ef003287d1f 100644
--- a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
@@ -8,7 +8,7 @@
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
@@ -60,7 +60,7 @@
                     title="{{ 'shared' | i18n }}"
                     aria-hidden="true"
                   ></i>
-                  <span class="sr-only">{{ "shared" | i18n }}</span>
+                  <span class="tw-sr-only">{{ "shared" | i18n }}</span>
                 </ng-container>
                 <ng-container *ngIf="r.hasAttachments">
                   <i
@@ -69,7 +69,7 @@
                     title="{{ 'attachments' | i18n }}"
                     aria-hidden="true"
                   ></i>
-                  <span class="sr-only">{{ "attachments" | i18n }}</span>
+                  <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
                 </ng-container>
                 <br />
                 <small>{{ r.subTitle }}</small>
diff --git a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
index 06176cdcd5a..b6cd8d06f21 100644
--- a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
@@ -8,7 +8,7 @@
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
@@ -66,7 +66,7 @@
                   title="{{ 'shared' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "shared" | i18n }}</span>
+                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
               <ng-container *ngIf="r.hasAttachments">
                 <i
@@ -75,7 +75,7 @@
                   title="{{ 'attachments' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "attachments" | i18n }}</span>
+                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
               <small>{{ r.subTitle }}</small>
diff --git a/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html b/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html
index ced0ff9731d..87447e45273 100644
--- a/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html
@@ -8,7 +8,7 @@
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
     <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
@@ -59,7 +59,7 @@
                   title="{{ 'shared' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "shared" | i18n }}</span>
+                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
               <ng-container *ngIf="c.hasAttachments">
                 <i
@@ -68,7 +68,7 @@
                   title="{{ 'attachments' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "attachments" | i18n }}</span>
+                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
               <small>{{ c.subTitle }}</small>
diff --git a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
index 36385dd087f..3b3fdfa589f 100644
--- a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
@@ -8,7 +8,7 @@
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
@@ -64,7 +64,7 @@
                   title="{{ 'shared' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "shared" | i18n }}</span>
+                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
               <ng-container *ngIf="r.hasAttachments">
                 <i
@@ -73,7 +73,7 @@
                   title="{{ 'attachments' | i18n }}"
                   aria-hidden="true"
                 ></i>
-                <span class="sr-only">{{ "attachments" | i18n }}</span>
+                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
               <small>{{ r.subTitle }}</small>
diff --git a/apps/web/src/app/tools/send/send.component.html b/apps/web/src/app/tools/send/send.component.html
index 9a66c85c78f..5a88f45cdc6 100644
--- a/apps/web/src/app/tools/send/send.component.html
+++ b/apps/web/src/app/tools/send/send.component.html
@@ -7,7 +7,7 @@
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
       </ng-container>
     </small>
   </ng-container>
@@ -108,7 +108,7 @@
                 title="{{ 'disabled' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "disabled" | i18n }}</span>
+              <span class="tw-sr-only">{{ "disabled" | i18n }}</span>
             </ng-container>
             <ng-container *ngIf="s.password">
               <i
@@ -117,7 +117,7 @@
                 title="{{ 'password' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "password" | i18n }}</span>
+              <span class="tw-sr-only">{{ "password" | i18n }}</span>
             </ng-container>
             <ng-container *ngIf="s.maxAccessCountReached">
               <i
@@ -126,7 +126,7 @@
                 title="{{ 'maxAccessCountReached' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "maxAccessCountReached" | i18n }}</span>
+              <span class="tw-sr-only">{{ "maxAccessCountReached" | i18n }}</span>
             </ng-container>
             <ng-container *ngIf="s.expired">
               <i
@@ -135,7 +135,7 @@
                 title="{{ 'expired' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "expired" | i18n }}</span>
+              <span class="tw-sr-only">{{ "expired" | i18n }}</span>
             </ng-container>
             <ng-container *ngIf="s.pendingDelete">
               <i
@@ -144,7 +144,7 @@
                 title="{{ 'pendingDeletion' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
+              <span class="tw-sr-only">{{ "pendingDeletion" | i18n }}</span>
             </ng-container>
           </td>
           <td bitCell class="tw-text-muted" (click)="editSend(s)" class="tw-cursor-pointer">
@@ -189,7 +189,7 @@
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
       </ng-container>
       <ng-container *ngIf="loaded">
         <bit-no-items [icon]="noItemIcon" class="tw-text-main">
diff --git a/apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html b/apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html
index d4ce1e79ba5..0e515a307c6 100644
--- a/apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html
+++ b/apps/web/src/app/vault/components/vault-items/vault-cipher-row.component.html
@@ -34,7 +34,7 @@
         title="{{ 'attachments' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "attachments" | i18n }}</span>
+      <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
       <ng-container *ngIf="showFixOldAttachments">
         <i
           class="bwi bwi-exclamation-triangle tw-ml-2 tw-leading-normal tw-text-warning"
@@ -42,7 +42,7 @@
           title="{{ 'attachmentsNeedFix' | i18n }}"
           aria-hidden="true"
         ></i>
-        <span class="sr-only">{{ "attachmentsNeedFix" | i18n }}</span>
+        <span class="tw-sr-only">{{ "attachmentsNeedFix" | i18n }}</span>
       </ng-container>
     </ng-container>
   </div>
diff --git a/apps/web/src/app/vault/individual-vault/add-edit-custom-fields.component.html b/apps/web/src/app/vault/individual-vault/add-edit-custom-fields.component.html
index dfba89e9620..1c2a75737e0 100644
--- a/apps/web/src/app/vault/individual-vault/add-edit-custom-fields.component.html
+++ b/apps/web/src/app/vault/individual-vault/add-edit-custom-fields.component.html
@@ -161,7 +161,7 @@
   </a>
   <div class="row" *ngIf="!cipher.isDeleted && !viewOnly && !(!cipher.edit && editMode)">
     <div class="col-5">
-      <label for="addFieldType" class="sr-only">{{ "type" | i18n }}</label>
+      <label for="addFieldType" class="tw-sr-only">{{ "type" | i18n }}</label>
       <select id="addFieldType" class="form-control" name="AddFieldType" [(ngModel)]="addFieldType">
         <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{ o.name }}</option>
         <option
diff --git a/apps/web/src/app/vault/individual-vault/attachments.component.html b/apps/web/src/app/vault/individual-vault/attachments.component.html
index 5a2c72451ee..d657cd7f6c3 100644
--- a/apps/web/src/app/vault/individual-vault/attachments.component.html
+++ b/apps/web/src/app/vault/individual-vault/attachments.component.html
@@ -51,7 +51,7 @@
                         title="{{ 'attachmentFixDescription' | i18n }}"
                         aria-hidden="true"
                       ></i>
-                      <span class="sr-only">{{ "attachmentFixDescription" | i18n }}</span></a
+                      <span class="tw-sr-only">{{ "attachmentFixDescription" | i18n }}</span></a
                     >
                     <button
                       type="button"
@@ -96,7 +96,7 @@
         </table>
         <div *ngIf="!viewOnly">
           <h3>{{ "newAttachment" | i18n }}</h3>
-          <label for="file" class="sr-only">{{ "file" | i18n }}</label>
+          <label for="file" class="tw-sr-only">{{ "file" | i18n }}</label>
           <input type="file" id="file" class="form-control-file" name="file" required />
           <small class="form-text text-muted">{{ "maxFileSize" | i18n }}</small>
         </div>
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.html b/apps/web/src/app/vault/individual-vault/vault.component.html
index fe1a97aff1d..f0be76018f7 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault.component.html
@@ -65,7 +65,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </div>
     <div
       *ngIf="isEmpty && !performingInitialLoad"
diff --git a/apps/web/src/app/vault/org-vault/vault.component.html b/apps/web/src/app/vault/org-vault/vault.component.html
index 7d148026c1a..881b0948c01 100644
--- a/apps/web/src/app/vault/org-vault/vault.component.html
+++ b/apps/web/src/app/vault/org-vault/vault.component.html
@@ -140,7 +140,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </div>
   </div>
 </div>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
index 1d71deca122..dee663eb199 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html
@@ -10,7 +10,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
 <ng-container *ngIf="!loading">
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
index 4d4c7f11076..220a2214600 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
@@ -21,7 +21,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
 <ng-container
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html
index b145f16daf1..36bc6543696 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.html
@@ -82,7 +82,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
   *ngIf="
@@ -134,7 +134,7 @@
                 title="{{ 'userUsingTwoStep' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
+              <span class="tw-sr-only">{{ "userUsingTwoStep" | i18n }}</span>
             </ng-container>
           </td>
           <td>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/user-add-edit.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/user-add-edit.component.html
index 11f6ae07d83..78d80d005c9 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/user-add-edit.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/user-add-edit.component.html
@@ -27,7 +27,7 @@
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
       </div>
       <div class="modal-body" *ngIf="!loading">
         <ng-container *ngIf="!editMode">
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
index 928d178c29a..a3e2a180c39 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
@@ -7,7 +7,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </p>
   </div>
 </div>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html
index 0fd6725304c..3b81d0564c9 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html
@@ -7,7 +7,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <div class="container page-content" *ngIf="!loading">
   <div class="page-header">
diff --git a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts
index 45cfc02a095..7a1510ef643 100644
--- a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts
+++ b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts
@@ -369,7 +369,7 @@ export class SsoComponent implements OnInit, OnDestroy {
     );
 
     const div = document.createElement("div");
-    div.className = "sr-only";
+    div.className = "tw-sr-only";
     div.id = "srErrorCount";
     div.setAttribute("aria-live", "polite");
     div.innerText = errorText + ": " + errorCountText;
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html
index e626df3a63f..49a9208107f 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html
@@ -12,7 +12,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
 <ng-container *ngIf="!loading">
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html b/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html
index e2457294eb1..2894752b28f 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html
@@ -5,7 +5,7 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <bit-container *ngIf="!loading">
   <!-- Account Credit -->
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html
index 0aaa3cc03ae..5c8a0985797 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.html
@@ -2,7 +2,7 @@
 <bit-container>
   <ng-container *ngIf="!firstLoaded && loading">
     <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </ng-container>
   <ng-container *ngIf="firstLoaded && !loading">
     <app-provider-subscription-status