[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.
2025-12-11 05:43:41 +00:00 · 2024-07-16 12:59:04 +02:00
parent 154f15fa58
commit d852a5ff07
36 changed files with 58 additions and 58 deletions
--- 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">
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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>
--- 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>

--- 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>
--- 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>
--- 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>
--- 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
--- 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
--- 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>
--- 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"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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
--- 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>
--- 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"
--- 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>
--- 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">
--- 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
--- 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>
--- 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">
--- 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>
--- 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">
--- 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;
--- 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">
--- 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 -->
--- 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