[CL-689][CL-799] Fix Icon button a11y errors (#15750)

* Throw error if appA11yTitle is null in icon button * Add required label input * Fix icon button errors in CL components and storeis * fix popover aria-label errors * remove commented code * add labels to icon buttons in browser * add labels to icon buttons in web * add labels to icon buttons in license * add labels to icon buttons in send * add labels to icon buttons in angular * fix missing pipe error * fix sso icon button missed in error * update labels in vault * add section expand button label * Adding labels to icon buttons * Add lint rule to not allow icon buttons without label input * rename util file * trigger updates on title change * update eslint rule name and folder * add edit collection label to vault headers * fix web header story label * add show/hide summary labels * update summary message * fix breadcrumbs label message * fix JSDoc to use correct input * remove commented code * use label as aria-label always. Remove init function * add moreBreadcrumbs translation message to other apps * add @bitwarden/team-ui-foundation as code owner for component eslint rules * switch title to const variable * add jsdoc comment on what the label input is used for * [PM-22415] Tax ID notifications for Organizations and Providers (#15996) * [NO LOGIC] Rename BillableEntity to BitwardenSubscriber This helps us maintain paraody with server where we call this choice type ISubscriber. I chose BitwardenSubscriber to avoid overlap with RxJS * [NO LOGIC] Move subscriber-billing.client to clients folder * [NO LOGIC] Move organization warnings under organization folder * Move getWarnings from OrganizationBillingApiService to new OrganizationBillingClient I'd like us to move away from stashing so much in libs and utilizing the JsLibServicesModule when it's not necessary to do so. These are invocations used exclusively by the Web Vault and, until that changes, they should be treated as such * Refactor OrganizationWarningsService There was a case added to the Inactive Subscription warning for a free trial, but free trials do not represent inactive subscriptions so this was semantically incorrect. This creates another method that pulls the free trial warning and shows a dialog asking the user to subscribe if they're on one. * Implement Tax ID Warnings throughout Admin Console and Provider Portal * Fix linting error * Jimmy's feedback * remove duplicate messages keys * revert changes to popover stories * add back dupe myItems key for now as it was already here * fix directive type errors * remove variable left in error from merge conflict * revert unintentional change to reports layout * add back reports change --------- Co-authored-by: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
2025-12-06 00:13:28 +00:00 · 2025-08-19 15:15:41 -04:00
parent 321cd86a2c
commit 4449d8baf6
124 changed files with 414 additions and 285 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -131,6 +131,7 @@ apps/web/src/translation-constants.ts @bitwarden/team-platform-dev
 .github/workflows/version-auto-bump.yml @bitwarden/team-platform-dev
 # ESLint custom rules
 libs/eslint @bitwarden/team-platform-dev
+libs/eslint/components @bitwarden/team-ui-foundation
 # Typescript tooling
 tsconfig.base.json @bitwarden/team-platform-dev
 nx.json @bitwarden/team-platform-dev
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5579,5 +5579,9 @@
  },
  "showLess": {
    "message": "Show less"
+  },
+  "moreBreadcrumbs": {
+    "message": "More breadcrumbs",
+    "description": "This is used in the context of a breadcrumb navigation, indicating that there are more items in the breadcrumb trail that are not currently displayed."
  }
 }
--- a/apps/browser/src/autofill/popup/settings/blocked-domains.component.html
+++ b/apps/browser/src/autofill/popup/settings/blocked-domains.component.html
@@ -30,7 +30,7 @@
        </bit-item-content>
        <button
          *ngIf="i < fieldsEditThreshold"
-          appA11yTitle="{{ 'remove' | i18n }}"
+          label="{{ 'remove' | i18n }}"
          bitIconButton="bwi-minus-circle"
          buttonType="danger"
          size="small"
--- a/apps/browser/src/autofill/popup/settings/excluded-domains.component.html
+++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html
@@ -26,7 +26,7 @@
        </bit-item-content>
        <button
          *ngIf="i < fieldsEditThreshold"
-          appA11yTitle="{{ 'remove' | i18n }}"
+          label="{{ 'remove' | i18n }}"
          bitIconButton="bwi-minus-circle"
          buttonType="danger"
          size="small"
--- a/apps/browser/src/platform/popup/components/pop-out.component.html
+++ b/apps/browser/src/platform/popup/components/pop-out.component.html
@@ -3,7 +3,7 @@
    bitIconButton="bwi-popout"
    size="small"
    type="button"
-    appA11yTitle="{{ 'popOutNewWindow' | i18n }}"
+    label="{{ 'popOutNewWindow' | i18n }}"
    [title]="'popOutNewWindow' | i18n"
    (click)="expand()"
  ></button>
--- a/apps/browser/src/platform/popup/layout/popup-header.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-header.component.html
@@ -19,8 +19,7 @@
        bitIconButton="bwi-angle-left"
        type="button"
        *ngIf="showBackButton"
-        [title]="'back' | i18n"
-        [attr.aria-label]="'back' | i18n"
+        [label]="'back' | i18n"
        [bitAction]="backAction"
      ></button>
      <h1 *ngIf="pageTitle" bitTypography="h3" class="!tw-mb-0.5">
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -67,14 +67,10 @@ class ExtensionPoppedContainerComponent {}
              <button type="button" bitBadge variant="primary">Fill</button>
            </bit-item-action>
            <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone" aria-label="Copy item"></button>
+              <button type="button" bitIconButton="bwi-clone" label="Copy item"></button>
            </bit-item-action>
            <bit-item-action>
-              <button
-                type="button"
-                bitIconButton="bwi-ellipsis-v"
-                aria-label="More options"
-              ></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" label="More options"></button>
            </bit-item-action>
          </ng-container>
        </bit-item>
@@ -102,13 +98,7 @@ class MockAddButtonComponent {}
@Component({
  selector: "mock-popout-button",
  template: `
-    <button
-      bitIconButton="bwi-popout"
-      size="small"
-      type="button"
-      title="Pop out"
-      aria-label="Pop out"
-    ></button>
+    <button bitIconButton="bwi-popout" size="small" type="button" label="Pop out"></button>
  `,
  imports: [IconButtonModule],
 })
@@ -278,7 +268,13 @@ class MockSettingsPageComponent {}
      <popup-footer slot="footer">
        <button type="button" bitButton buttonType="primary">Save</button>
        <button type="button" bitButton buttonType="secondary">Cancel</button>
-        <button slot="end" type="button" buttonType="danger" bitIconButton="bwi-trash"></button>
+        <button
+          slot="end"
+          type="button"
+          buttonType="danger"
+          bitIconButton="bwi-trash"
+          label="Delete"
+        ></button>
      </popup-footer>
    </popup-page>
  `,
@@ -671,17 +667,13 @@ export const WithVirtualScrollChild: Story = {
                      <button type="button" bitBadge variant="primary">Fill</button>
                    </bit-item-action>
                    <bit-item-action>
-                      <button
-                        type="button"
-                        bitIconButton="bwi-clone"
-                        aria-label="Copy item"
-                      ></button>
+                      <button type="button" bitIconButton="bwi-clone" label="Copy item"></button>
                    </bit-item-action>
                    <bit-item-action>
                      <button
                        type="button"
                        bitIconButton="bwi-ellipsis-v"
-                        aria-label="More options"
+                        label="More options"
                      ></button>
                    </bit-item-action>
                  </ng-container>
--- a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html
+++ b/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html
@@ -26,7 +26,7 @@
      slot="end"
      bitIconButton="bwi-trash"
      [bitAction]="deleteSend"
-      appA11yTitle="{{ 'delete' | i18n }}"
+      label="{{ 'delete' | i18n }}"
    ></button>
  </popup-footer>
 </popup-page>
--- a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html
@@ -38,7 +38,7 @@
      type="button"
      buttonType="danger"
      bitIconButton="bwi-trash"
-      [appA11yTitle]="'delete' | i18n"
+      [label]="'delete' | i18n"
    ></button>
  </popup-footer>
 </popup-page>
--- a/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-copy-action/item-copy-actions.component.html
@@ -7,7 +7,7 @@
        size="small"
        appCopyField="username"
        [cipher]="cipher"
-        [appA11yTitle]="'copyUsername' | i18n"
+        [label]="'copyUsername' | i18n"
      ></button>
    </bit-item-action>
    <bit-item-action>
@@ -18,7 +18,7 @@
        size="small"
        appCopyField="password"
        [cipher]="cipher"
-        [appA11yTitle]="'copyPassword' | i18n"
+        [label]="'copyPassword' | i18n"
      ></button>
    </bit-item-action>
    <bit-item-action>
@@ -28,7 +28,7 @@
        size="small"
        appCopyField="totp"
        [cipher]="cipher"
-        [appA11yTitle]="'copyVerificationCode' | i18n"
+        [label]="'copyVerificationCode' | i18n"
      ></button>
    </bit-item-action>
  </ng-container>
@@ -40,7 +40,7 @@
        type="button"
        bitIconButton="bwi-clone"
        size="small"
-        [appA11yTitle]="'copyFieldCipherName' | i18n: singleCopyableLogin.key : cipher.name"
+        [label]="'copyFieldCipherName' | i18n: singleCopyableLogin.key : cipher.name"
        [appCopyField]="singleCopyableLogin.field"
        [cipher]="cipher"
      ></button>
@@ -49,7 +49,7 @@
          type="button"
          bitIconButton="bwi-clone"
          size="small"
-          [appA11yTitle]="
+          [label]="
            hasLoginValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
          "
          [disabled]="!hasLoginValues"
@@ -86,7 +86,7 @@
        size="small"
        appCopyField="cardNumber"
        [cipher]="cipher"
-        [appA11yTitle]="'copyNumber' | i18n"
+        [label]="'copyNumber' | i18n"
      ></button>
    </bit-item-action>
    <bit-item-action>
@@ -96,7 +96,7 @@
        size="small"
        appCopyField="securityCode"
        [cipher]="cipher"
-        [appA11yTitle]="'copySecurityCode' | i18n"
+        [label]="'copySecurityCode' | i18n"
      ></button>
    </bit-item-action>
  </ng-container>
@@ -107,7 +107,7 @@
        type="button"
        bitIconButton="bwi-clone"
        size="small"
-        [appA11yTitle]="'copyFieldCipherName' | i18n: singleCopyableCard.key : cipher.name"
+        [label]="'copyFieldCipherName' | i18n: singleCopyableCard.key : cipher.name"
        [appCopyField]="singleCopyableCard.field"
        [cipher]="cipher"
        showToast
@@ -117,7 +117,7 @@
          type="button"
          bitIconButton="bwi-clone"
          size="small"
-          [appA11yTitle]="
+          [label]="
            hasCardValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
          "
          [disabled]="!hasCardValues"
@@ -142,7 +142,7 @@
    type="button"
    bitIconButton="bwi-clone"
    size="small"
-    [appA11yTitle]="'copyFieldCipherName' | i18n: singleCopyableIdentity.key : cipher.name"
+    [label]="'copyFieldCipherName' | i18n: singleCopyableIdentity.key : cipher.name"
    [appCopyField]="singleCopyableIdentity.field"
    [cipher]="cipher"
    showToast
@@ -152,7 +152,7 @@
      type="button"
      bitIconButton="bwi-clone"
      size="small"
-      [appA11yTitle]="
+      [label]="
        hasIdentityValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
      "
      [disabled]="!hasIdentityValues"
@@ -180,9 +180,7 @@
    type="button"
    bitIconButton="bwi-clone"
    size="small"
-    [appA11yTitle]="
-      hasSecureNoteValue ? ('copyNoteTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
-    "
+    [label]="hasSecureNoteValue ? ('copyNoteTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)"
    appCopyField="secureNote"
    [cipher]="cipher"
  ></button>
@@ -193,9 +191,7 @@
    type="button"
    bitIconButton="bwi-clone"
    size="small"
-    [appA11yTitle]="
-      hasSshKeyValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)
-    "
+    [label]="hasSshKeyValues ? ('copyInfoTitle' | i18n: cipher.name) : ('noValuesToCopy' | i18n)"
    [disabled]="!hasSshKeyValues"
    [bitMenuTriggerFor]="sshKeyOptions"
  ></button>
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
@@ -3,8 +3,7 @@
    type="button"
    bitIconButton="bwi-ellipsis-v"
    size="small"
-    [attr.aria-label]="'moreOptionsLabel' | i18n: cipher.name"
-    [title]="'moreOptionsTitle' | i18n: cipher.name"
+    [label]="'moreOptionsLabel' | i18n: cipher.name"
    [disabled]="decryptionFailure"
    [bitMenuTriggerFor]="moreOptions"
  ></button>
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.html
@@ -8,7 +8,7 @@
      bitIconButton="bwi-sliders"
      [buttonType]="'muted'"
      [bitDisclosureTriggerFor]="disclosureRef"
-      [appA11yTitle]="'filterVault' | i18n"
+      [label]="'filterVault' | i18n"
      aria-describedby="filters-applied"
    ></button>
    <p
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -42,7 +42,7 @@
      type="button"
      size="small"
      (click)="onRefresh.emit()"
-      [appA11yTitle]="'refresh' | i18n"
+      [label]="'refresh' | i18n"
    ></button>
    <span bitTypography="body2" slot="end">
      <span
@@ -141,8 +141,7 @@
                bitIconButton="bwi-external-link"
                size="small"
                (click)="launchCipher(cipher)"
-                [attr.aria-label]="'launchWebsiteName' | i18n: cipher.name"
-                [title]="'launchWebsiteName' | i18n: cipher.name"
+                [label]="'launchWebsiteName' | i18n: cipher.name"
              ></button>
            </bit-item-action>
            <app-item-copy-actions [cipher]="cipher"></app-item-copy-actions>
--- a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.html
@@ -33,7 +33,7 @@
      type="button"
      buttonType="danger"
      bitIconButton="bwi-trash"
-      [appA11yTitle]="(cipher.isDeleted ? 'deleteForever' : 'delete') | i18n"
+      [label]="(cipher.isDeleted ? 'deleteForever' : 'delete') | i18n"
    ></button>
  </popup-footer>
 </popup-page>
--- a/apps/browser/src/vault/popup/settings/folders-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/folders-v2.component.html
@@ -25,7 +25,7 @@
              slot="end"
              type="button"
              (click)="openAddEditFolderDialog(folder)"
-              [appA11yTitle]="'editFolderWithName' | i18n: folder.name"
+              [label]="'editFolderWithName' | i18n: folder.name"
              bitIconButton="bwi-pencil-square"
              class="tw-self-end"
              data-testid="edit-folder-button"
--- a/apps/browser/src/vault/popup/settings/trash-list-items-container/trash-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/settings/trash-list-items-container/trash-list-items-container.component.html
@@ -37,8 +37,7 @@
            type="button"
            bitIconButton="bwi-ellipsis-v"
            size="small"
-            [attr.aria-label]="'moreOptionsLabel' | i18n: cipher.name"
-            [title]="'moreOptionsTitle' | i18n: cipher.name"
+            [label]="'moreOptionsLabel' | i18n: cipher.name"
            [bitMenuTriggerFor]="moreOptions"
          ></button>
          <bit-menu #moreOptions>
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -4077,5 +4077,9 @@
  },
  "enableAutotypeDescription": {
    "message": "Bitwarden does not validate input locations, be sure you are in the right window and field before using the shortcut."
+  },
+  "moreBreadcrumbs": {
+    "message": "More breadcrumbs",
+    "description": "This is used in the context of a breadcrumb navigation, indicating that there are more items in the breadcrumb trail that are not currently displayed."
  }
 }
--- a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.html
+++ b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.html
@@ -34,6 +34,7 @@
          [bitMenuTriggerFor]="editCollectionMenu"
          size="small"
          type="button"
+          [label]="'editCollection' | i18n"
        ></button>
        <bit-menu #editCollectionMenu>
          <ng-container *ngIf="canEditCollection">
--- 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
@@ -80,7 +80,7 @@
        bitIconButton="bwi-trash"
        bitFormButton
        [bitAction]="delete"
-        [appA11yTitle]="'delete' | i18n"
+        [label]="'delete' | i18n"
      ></button>
    </ng-container>
  </bit-dialog>
--- a/apps/web/src/app/admin-console/organizations/manage/groups.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.html
@@ -46,7 +46,7 @@
              type="button"
              bitIconButton="bwi-ellipsis-v"
              size="small"
-              appA11yTitle="{{ 'options' | i18n }}"
+              label="{{ 'options' | i18n }}"
            ></button>

            <bit-menu #headerMenu>
@@ -82,7 +82,7 @@
              type="button"
              bitIconButton="bwi-ellipsis-v"
              size="small"
-              appA11yTitle="{{ 'options' | i18n }}"
+              label="{{ 'options' | i18n }}"
            ></button>

            <bit-menu #rowMenu>
--- a/apps/web/src/app/admin-console/organizations/members/members.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.html
@@ -106,7 +106,7 @@
                type="button"
                bitIconButton="bwi-ellipsis-v"
                size="small"
-                appA11yTitle="{{ 'options' | i18n }}"
+                label="{{ 'options' | i18n }}"
                *ngIf="showUserManagementControls$ | async"
              ></button>

@@ -350,7 +350,7 @@
                type="button"
                bitIconButton="bwi-ellipsis-v"
                size="small"
-                appA11yTitle="{{ 'options' | i18n }}"
+                label="{{ 'options' | i18n }}"
              ></button>

              <bit-menu #rowMenu>
--- a/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector-dialog.stories.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector-dialog.stories.ts
@@ -51,7 +51,7 @@ const render: Story["render"] = (args) => ({
          buttonType="danger"
          size="default"
          title="Delete"
-          aria-label="Delete"></button>
+          label="Delete"></button>
      </ng-container>
    </bit-dialog>
  `,
--- 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
@@ -122,7 +122,7 @@
          type="button"
          bitIconButton="bwi-close"
          buttonType="muted"
-          appA11yTitle="{{ 'remove' | i18n }} {{ item.labelName }}"
+          label="{{ 'remove' | i18n }} {{ item.labelName }}"
          [disabled]="disabled"
          (click)="selectionList.deselectItem(item.id); handleBlur()"
        ></button>
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
@@ -143,7 +143,7 @@
        buttonType="danger"
        class="tw-ml-auto"
        bitFormButton
-        [appA11yTitle]="'delete' | i18n"
+        [label]="'delete' | i18n"
        [bitAction]="delete"
        [disabled]="loading"
      ></button>
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
@@ -62,7 +62,7 @@
        buttonType="danger"
        [bitAction]="delete"
        *ngIf="editMode"
-        appA11yTitle="{{ 'delete' | i18n }}"
+        label="{{ 'delete' | i18n }}"
      ></button>
    </ng-container>
  </bit-dialog>
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
@@ -89,7 +89,7 @@
            <button
              [bitMenuTriggerFor]="trustedContactOptions"
              type="button"
-              appA11yTitle="{{ 'options' | i18n }}"
+              label="{{ 'options' | i18n }}"
              bitIconButton="bwi-ellipsis-v"
              buttonType="main"
            ></button>
@@ -212,7 +212,7 @@
            <button
              [bitMenuTriggerFor]="grantedContactOptions"
              type="button"
-              appA11yTitle="{{ 'options' | i18n }}"
+              label="{{ 'options' | i18n }}"
              bitIconButton="bwi-ellipsis-v"
              buttonType="main"
            ></button>
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html
@@ -39,7 +39,7 @@
                type="button"
                buttonType="danger"
                (click)="remove(i)"
-                appA11yTitle="{{ 'remove' | i18n }}"
+                label="{{ 'remove' | i18n }}"
              ></button>
            </div>
          </div>
--- a/apps/web/src/app/billing/members/free-bitwarden-families.component.html
+++ b/apps/web/src/app/billing/members/free-bitwarden-families.component.html
@@ -53,7 +53,7 @@
                      bitIconButton="bwi-ellipsis-v"
                      buttonType="main"
                      [bitMenuTriggerFor]="appListDropdown"
-                      appA11yTitle="{{ 'options' | i18n }}"
+                      label="{{ 'options' | i18n }}"
                    ></button>
                    <bit-menu #appListDropdown>
                      @if (!isSelfHosted && !sponsoredFamily.validUntil) {
--- a/apps/web/src/app/billing/organizations/billing-sync-api-key.component.html
+++ b/apps/web/src/app/billing/organizations/billing-sync-api-key.component.html
@@ -33,7 +33,7 @@
            showToast
            [valueLabel]="'billingSyncKey' | i18n"
            [appCopyClick]="clientSecret"
-            [appA11yTitle]="'copyValue' | i18n"
+            [label]="'copyValue' | i18n"
          ></button>
        </bit-form-field>
        <div class="tw-mt-2 tw-text-sm tw-text-muted" *ngIf="showLastSyncText">
--- a/apps/web/src/app/billing/organizations/billing-sync-key.component.html
+++ b/apps/web/src/app/billing/organizations/billing-sync-key.component.html
@@ -33,7 +33,7 @@
        bitIconButton="bwi-trash"
        bitFormButton
        [bitAction]="deleteConnection"
-        appA11yTitle="{{ 'delete' | i18n }}"
+        label="{{ 'delete' | i18n }}"
      ></button>
    </ng-container>
  </bit-dialog>
--- a/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
+++ b/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
@@ -359,7 +359,7 @@
              type="button"
              [bitIconButton]="totalOpened ? 'bwi-angle-down' : 'bwi-angle-up'"
              size="small"
-              aria-hidden="true"
+              [label]="totalOpened ? ('hidePricingSummary' | i18n) : ('showPricingSummary' | i18n)"
            ></button>
          </p>
        </div>
--- a/apps/web/src/app/billing/organizations/change-plan.component.html
+++ b/apps/web/src/app/billing/organizations/change-plan.component.html
@@ -8,7 +8,7 @@
      type="button"
      size="small"
      class="tw-float-right"
-      appA11yTitle="{{ 'cancel' | i18n }}"
+      label="{{ 'cancel' | i18n }}"
      (click)="cancel()"
    ></button>
    <h2 bitTypography="h2">{{ "changeBillingPlan" | i18n }}</h2>
--- a/apps/web/src/app/billing/settings/sponsoring-org-row.component.html
+++ b/apps/web/src/app/billing/settings/sponsoring-org-row.component.html
@@ -12,7 +12,7 @@
    bitIconButton="bwi-ellipsis-v"
    buttonType="main"
    [bitMenuTriggerFor]="appListDropdown"
-    appA11yTitle="{{ 'options' | i18n }}"
+    label="{{ 'options' | i18n }}"
  ></button>
  <bit-menu #appListDropdown>
    <button
--- a/apps/web/src/app/billing/shared/pricing-summary/pricing-summary.component.html
+++ b/apps/web/src/app/billing/shared/pricing-summary/pricing-summary.component.html
@@ -11,7 +11,9 @@
        type="button"
        [bitIconButton]="summaryData.totalOpened ? 'bwi-angle-down' : 'bwi-angle-up'"
        size="small"
-        aria-hidden="true"
+        [label]="
+          summaryData.totalOpened ? ('hidePricingSummary' | i18n) : ('showPricingSummary' | i18n)
+        "
      ></button>
    </p>
  </div>
--- a/apps/web/src/app/dirt/reports/reports-layout.component.html
+++ b/apps/web/src/app/dirt/reports/reports-layout.component.html
@@ -2,7 +2,7 @@

 <div class="tw-flex tw-flex-wrap tw-gap-4 tw-mt-4">
  <div class="tw-w-full">
-    <a bitButton bitIconButton="bwi-angle-left" routerLink="./" *ngIf="!homepage">
+    <a bitButton routerLink="./" *ngIf="!homepage">
      {{ "backToReports" | i18n }}
    </a>
  </div>
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/apps/web/src/app/layouts/header/web-header.stories.ts
@@ -48,7 +48,7 @@ class MockStateService {

@Component({
  selector: "product-switcher",
-  template: `<button type="button" bitIconButton="bwi-filter"></button>`,
+  template: `<button type="button" bitIconButton="bwi-filter" label="Switch products"></button>`,
  standalone: false,
 })
 class MockProductSwitcher {}
--- a/apps/web/src/app/layouts/product-switcher/product-switcher.component.html
+++ b/apps/web/src/app/layouts/product-switcher/product-switcher.component.html
@@ -3,7 +3,7 @@
  bitIconButton="bwi bwi-fw bwi-filter"
  [bitMenuTriggerFor]="content?.menu"
  [buttonType]="buttonType"
-  [attr.aria-label]="'switchProducts' | i18n"
+  [label]="'switchProducts' | i18n"
  *ngIf="products$ | async"
 ></button>
 <product-switcher-content #content></product-switcher-content>
--- a/apps/web/src/app/settings/domain-rules.component.html
+++ b/apps/web/src/app/settings/domain-rules.component.html
@@ -32,7 +32,7 @@
          type="button"
          buttonType="danger"
          (click)="remove(i)"
-          appA11yTitle="{{ 'remove' | i18n }}"
+          label="{{ 'remove' | i18n }}"
        ></button>
      </div>
      <button bitButton type="button" (click)="add()" buttonType="secondary" class="tw-mb-2">
@@ -62,6 +62,7 @@
              bitIconButton="bwi-ellipsis-v"
              [bitMenuTriggerFor]="appListDropdown"
              class="tw-border-0 tw-bg-transparent tw-p-0"
+              [label]="'editDomain' | i18n"
            ></button>
            <bit-menu #appListDropdown>
              <a href="#" bitMenuItem appStopClick (click)="toggleExcluded(d)" *ngIf="!d.excluded">
--- a/apps/web/src/app/tools/send/send.component.html
+++ b/apps/web/src/app/tools/send/send.component.html
@@ -156,7 +156,7 @@
              type="button"
              [bitMenuTriggerFor]="sendOptions"
              bitIconButton="bwi-ellipsis-v"
-              appA11yTitle="{{ 'options' | i18n }}"
+              label="{{ 'options' | i18n }}"
            ></button>
            <bit-menu #sendOptions>
              <button type="button" bitMenuItem (click)="copy(s)">
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
@@ -71,7 +71,7 @@
        bitIconButton="bwi-trash"
        type="button"
        buttonType="danger"
-        [appA11yTitle]="'delete' | i18n"
+        [label]="'delete' | i18n"
        [bitAction]="delete"
        [disabled]="!canDelete"
        data-testid="delete-cipher-btn"
--- 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
@@ -82,7 +82,7 @@
    size="small"
    bitIconButton="bwi-ellipsis-v"
    type="button"
-    appA11yTitle="{{ 'options' | i18n }}"
+    label="{{ 'options' | i18n }}"
    appStopProp
  ></button>
  <bit-menu #corruptedCipherOptions>
@@ -101,7 +101,7 @@
      bitIconButton="bwi-ellipsis-v"
      type="button"
      appStopProp
-      appA11yTitle="{{ 'options' | i18n }}"
+      label="{{ 'options' | i18n }}"
    ></button>
    <bit-menu #cipherOptions>
      <ng-container *ngIf="isNotDeletedLoginCipher">
--- a/apps/web/src/app/vault/components/vault-items/vault-collection-row.component.html
+++ b/apps/web/src/app/vault/components/vault-items/vault-collection-row.component.html
@@ -65,7 +65,7 @@
      size="small"
      bitIconButton="bwi-ellipsis-v"
      type="button"
-      appA11yTitle="{{ 'options' | i18n }}"
+      label="{{ 'options' | i18n }}"
      appStopProp
    ></button>
  }
--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.html
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.html
@@ -56,7 +56,7 @@
            bitIconButton="bwi-ellipsis-v"
            size="small"
            type="button"
-            appA11yTitle="{{ 'options' | i18n }}"
+            label="{{ 'options' | i18n }}"
          ></button>
          <bit-menu #headerMenu>
            <button *ngIf="bulkMoveAllowed" type="button" bitMenuItem (click)="bulkMoveToFolder()">
--- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
@@ -29,7 +29,7 @@
          [bitMenuTriggerFor]="editCollectionMenu"
          size="small"
          type="button"
-          aria-haspopup="true"
+          [label]="'editCollection' | i18n"
        ></button>
        <bit-menu #editCollectionMenu>
          <button
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -2825,6 +2825,12 @@
      }
    }
  },
+  "showPricingSummary": {
+    "message": "Show pricing summary"
+  },
+  "hidePricingSummary": {
+    "message": "Hide pricing summary"
+  },
  "summary": {
    "message": "Summary"
  },
@@ -11023,6 +11029,10 @@
  "missingTaxIdWarning": {
    "message": "Action required: You're missing a Tax ID number in payment details. If a Tax ID is not added, your invoices may include additional tax."
  },
+  "moreBreadcrumbs": {
+    "message": "More breadcrumbs",
+    "description": "This is used in the context of a breadcrumb navigation, indicating that there are more items in the breadcrumb trail that are not currently displayed."
+  },
  "addTaxId": {
    "message": "Add a Tax ID"
  },
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html
@@ -25,7 +25,7 @@
          bitIconButton="bwi-ellipsis-v"
          size="small"
          type="button"
-          appA11yTitle="{{ 'options' | i18n }}"
+          label="{{ 'options' | i18n }}"
        ></button>
        <bit-menu #headerMenu>
          <button
@@ -71,7 +71,7 @@
          bitIconButton="bwi-ellipsis-v"
          size="small"
          type="button"
-          appA11yTitle="{{ 'options' | i18n }}"
+          label="{{ 'options' | i18n }}"
        ></button>
        <bit-menu #rowMenu>
          <button
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html
@@ -36,7 +36,7 @@
          type="button"
          bitSuffix
          bitIconButton="bwi-clone"
-          appA11yTitle="{{ 'copyDnsTxtRecord' | i18n }}"
+          label="{{ 'copyDnsTxtRecord' | i18n }}"
          (click)="copyDnsTxt()"
        ></button>
      </bit-form-field>
@@ -67,8 +67,7 @@
        bitIconButton="bwi-trash"
        buttonType="danger"
        size="default"
-        title="{{ 'delete' | i18n }}"
-        aria-label="Delete"
+        label="{{ 'delete' | i18n }}"
        [bitAction]="deleteDomain"
        type="submit"
        bitFormButton
--- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html
@@ -29,7 +29,7 @@
      bitSuffix
      bitIconButton="bwi-clone"
      [bitAction]="copyScimUrl"
-      [appA11yTitle]="'copyScimUrl' | i18n"
+      [label]="'copyScimUrl' | i18n"
    ></button>
  </bit-form-field>

@@ -46,7 +46,7 @@
      bitSuffix
      [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
      [bitAction]="toggleScimKey"
-      [appA11yTitle]="'toggleVisibility' | i18n"
+      [label]="'toggleVisibility' | i18n"
    ></button>
    <button
      type="button"
@@ -54,14 +54,14 @@
      bitIconButton="bwi-generate"
      [bitAction]="rotateScimKey"
      bitFormButton
-      [appA11yTitle]="'rotateScimKey' | i18n"
+      [label]="'rotateScimKey' | i18n"
    ></button>
    <button
      type="button"
      bitSuffix
      bitIconButton="bwi-clone"
      [bitAction]="copyScimKey"
-      [appA11yTitle]="'copyScimKey' | i18n"
+      [label]="'copyScimKey' | i18n"
    ></button>
    <bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
  </bit-form-field>
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/dialogs/add-edit-member-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/dialogs/add-edit-member-dialog.component.html
@@ -58,7 +58,7 @@
          bitIconButton="bwi-trash"
          buttonType="danger"
          bitFormButton
-          [appA11yTitle]="'delete' | i18n"
+          [label]="'delete' | i18n"
          [bitAction]="delete"
          [disabled]="loading"
        ></button>
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.html
@@ -79,7 +79,7 @@
                type="button"
                bitIconButton="bwi-ellipsis-v"
                size="small"
-                appA11yTitle="{{ 'options' | i18n }}"
+                label="{{ 'options' | i18n }}"
              ></button>
              <bit-menu #headerMenu>
                <button
@@ -177,7 +177,7 @@
                type="button"
                bitIconButton="bwi-ellipsis-v"
                size="small"
-                appA11yTitle="{{ 'options' | i18n }}"
+                label="{{ 'options' | i18n }}"
              ></button>
              <bit-menu #rowMenu>
                <button
--- a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
+++ b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
@@ -181,7 +181,7 @@
            bitSuffix
            type="button"
            [appCopyClick]="callbackPath"
-            [appA11yTitle]="'copyValue' | i18n"
+            [label]="'copyValue' | i18n"
          ></button>
        </bit-form-field>

@@ -193,7 +193,7 @@
            bitSuffix
            type="button"
            [appCopyClick]="signedOutCallbackPath"
-            [appA11yTitle]="'copyValue' | i18n"
+            [label]="'copyValue' | i18n"
          ></button>
        </bit-form-field>

@@ -336,7 +336,7 @@
            bitSuffix
            type="button"
            [appCopyClick]="spEntityId"
-            [appA11yTitle]="'copyValue' | i18n"
+            [label]="'copyValue' | i18n"
          ></button>
        </bit-form-field>

@@ -348,7 +348,7 @@
            bitSuffix
            type="button"
            [appCopyClick]="spEntityIdStatic"
-            [appA11yTitle]="'copyValue' | i18n"
+            [label]="'copyValue' | i18n"
          ></button>
        </bit-form-field>

@@ -360,14 +360,14 @@
            bitSuffix
            type="button"
            [appLaunchClick]="spMetadataUrl"
-            [appA11yTitle]="'launch' | i18n"
+            [label]="'launch' | i18n"
          ></button>
          <button
            bitIconButton="bwi-clone"
            bitSuffix
            type="button"
            [appCopyClick]="spMetadataUrl"
-            [appA11yTitle]="'copyValue' | i18n"
+            [label]="'copyValue' | i18n"
          ></button>
        </bit-form-field>

@@ -379,7 +379,7 @@
            bitSuffix
            type="button"
            [appCopyClick]="spAcsUrl"
-            [appA11yTitle]="'copyValue' | i18n"
+            [label]="'copyValue' | i18n"
          ></button>
        </bit-form-field>

--- 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
@@ -86,7 +86,7 @@
          type="button"
          bitIconButton="bwi-ellipsis-v"
          size="small"
-          appA11yTitle="{{ 'options' | i18n }}"
+          label="{{ 'options' | i18n }}"
        ></button>
        <bit-menu #rowMenu>
          <button
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/app-table-row-scrollable.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/app-table-row-scrollable.component.html
@@ -84,7 +84,7 @@
          type="button"
          bitIconButton="bwi-ellipsis-v"
          size="small"
-          appA11yTitle="{{ 'options' | i18n }}"
+          label="{{ 'options' | i18n }}"
        ></button>

        <bit-menu #rowMenu>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/overview/section.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/overview/section.component.html
@@ -7,6 +7,7 @@
      (click)="toggle()"
      [attr.aria-expanded]="open"
      [attr.aria-controls]="contentId"
+      [label]="'toggleVisibility' | i18n"
    ></button>
  </header>
  <div *ngIf="open" [attr.id]="contentId" class="tw-mt-4">
--- a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html
@@ -95,7 +95,7 @@
        buttonType="danger"
        bitIconButton="bwi-trash"
        bitFormButton
-        [appA11yTitle]="'delete' | i18n"
+        [label]="'delete' | i18n"
        [bitAction]="delete"
      ></button>
    </ng-container>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
@@ -40,8 +40,7 @@
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
          [bitMenuTriggerFor]="tableMenu"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
        ></button>
      </th>
    </tr>
@@ -65,8 +64,7 @@
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
          [bitMenuTriggerFor]="tokenMenu"
        ></button>
      </td>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/config/config.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/config/config.component.html
@@ -11,12 +11,19 @@
          type="button"
          bitIconButton="bwi-clone"
          [bitAction]="copyIdentityUrl"
+          [label]="'copyCustomField' | i18n: identityUrl"
        ></button>
      </bit-form-field>
      <bit-form-field class="tw-w-2/5 tw-min-w-80">
        <bit-label>{{ "apiUrl" | i18n }}</bit-label>
        <input bitInput type="text" [(ngModel)]="apiUrl" [disabled]="true" />
-        <button bitSuffix type="button" bitIconButton="bwi-clone" [bitAction]="copyApiUrl"></button>
+        <button
+          bitSuffix
+          type="button"
+          bitIconButton="bwi-clone"
+          [bitAction]="copyApiUrl"
+          [label]="'copyCustomField' | i18n: apiUrl"
+        ></button>
      </bit-form-field>
    </div>
    <bit-form-field class="tw-w-2/5 tw-min-w-80">
@@ -27,6 +34,7 @@
        type="button"
        bitIconButton="bwi-clone"
        [bitAction]="copyOrganizationId"
+        [label]="'copyCustomField' | i18n: organizationId"
      ></button>
    </bit-form-field>
  </div>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
@@ -39,8 +39,7 @@
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
          [bitMenuTriggerFor]="tableMenu"
        ></button>
      </th>
@@ -72,8 +71,7 @@
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
          [bitMenuTriggerFor]="serviceAccountMenu"
        ></button>
      </td>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/access-policies/access-policy-selector/access-policy-selector.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/access-policies/access-policy-selector/access-policy-selector.component.html
@@ -67,8 +67,7 @@
            buttonType="main"
            size="default"
            [disabled]="disabled"
-            [attr.title]="'remove' | i18n"
-            [attr.aria-label]="'remove' | i18n"
+            [label]="'remove' | i18n"
            (click)="selectionList.deselectItem(item.id); handleBlur()"
          ></button>
        </td>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
@@ -43,8 +43,7 @@
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
          [bitMenuTriggerFor]="tableMenu"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
          *ngIf="showMenus"
        ></button>
      </th>
@@ -77,8 +76,7 @@
                bitIconButton="bwi-clone"
                buttonType="main"
                size="small"
-                [title]="'copyUuid' | i18n"
-                [attr.aria-label]="'copyUuid' | i18n"
+                [label]="'copyUuid' | i18n"
                (click)="copyProjectUuidToClipboard(project.id)"
              ></button>
            </div>
@@ -94,8 +92,7 @@
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
          [bitMenuTriggerFor]="projectMenu"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
          *ngIf="showMenus"
        ></button>
      </td>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
@@ -45,8 +45,7 @@
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
          [bitMenuTriggerFor]="tableMenu"
        ></button>
      </th>
@@ -78,8 +77,7 @@
                bitIconButton="bwi-clone"
                buttonType="main"
                size="small"
-                [title]="'copyUuid' | i18n"
-                [attr.aria-label]="'copyUuid' | i18n"
+                [label]="'copyUuid' | i18n"
                (click)="copySecretUuidEvent.emit(secret.id)"
              ></button>
            </div>
@@ -108,8 +106,7 @@
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
+          [label]="'options' | i18n"
          [bitMenuTriggerFor]="secretMenu"
        ></button>
      </td>
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -12,6 +12,7 @@ import angularRxjs from "eslint-plugin-rxjs-angular";
 import storybook from "eslint-plugin-storybook";

 import platformPlugins from "./libs/eslint/platform/index.mjs";
+import componentPlugins from "./libs/eslint/components/index.mjs";

 export default tseslint.config(
  ...storybook.configs["flat/recommended"],
@@ -174,6 +175,7 @@ export default tseslint.config(
    plugins: {
      "@angular-eslint/template": angular.templatePlugin,
      tailwindcss: eslintPluginTailwindCSS,
+      "@bitwarden/components": componentPlugins,
    },
    rules: {
      "@angular-eslint/template/button-has-type": "error",
@@ -188,6 +190,10 @@ export default tseslint.config(
      "tailwindcss/enforces-negative-arbitrary-values": "error",
      "tailwindcss/enforces-shorthand": "error",
      "tailwindcss/no-contradicting-classname": "error",
+      "@bitwarden/components/require-label-on-biticonbutton": [
+        "error",
+        { ignoreIfHas: ["bitPasswordInputToggle"] },
+      ],
    },
  },

--- a/libs/angular/src/vault/components/spotlight/spotlight.component.html
+++ b/libs/angular/src/vault/components/spotlight/spotlight.component.html
@@ -18,9 +18,8 @@
      size="small"
      *ngIf="!persistent"
      (click)="handleDismiss()"
-      [attr.title]="'close' | i18n"
-      [attr.aria-label]="'close' | i18n"
      class="-tw-me-2"
+      [label]="'close' | i18n"
    ></button>
  </div>

--- a/libs/auth/src/angular/input-password/input-password.component.html
+++ b/libs/auth/src/angular/input-password/input-password.component.html
@@ -45,7 +45,7 @@
        type="button"
        bitIconButton="bwi-generate"
        bitSuffix
-        [appA11yTitle]="'generatePassword' | i18n"
+        [label]="'generatePassword' | i18n"
        (click)="generatePassword()"
      ></button>
      <button
@@ -53,7 +53,7 @@
        type="button"
        bitSuffix
        bitIconButton="bwi-clone"
-        appA11yTitle="{{ 'copyPassword' | i18n }}"
+        label="{{ 'copyPassword' | i18n }}"
        (click)="copy()"
      ></button>
      <button
--- a/libs/components/src/a11y/a11y-title.directive.ts
+++ b/libs/components/src/a11y/a11y-title.directive.ts
@@ -1,4 +1,6 @@
-import { Directive, effect, ElementRef, input, Renderer2 } from "@angular/core";
+import { Directive, effect, ElementRef, input } from "@angular/core";
+
+import { setA11yTitleAndAriaLabel } from "./set-a11y-title-and-aria-label";

@Directive({
  selector: "[appA11yTitle]",
@@ -6,19 +8,16 @@ import { Directive, effect, ElementRef, input, Renderer2 } from "@angular/core";
 export class A11yTitleDirective {
  title = input.required<string>({ alias: "appA11yTitle" });

-  constructor(
-    private el: ElementRef,
-    private renderer: Renderer2,
-  ) {
+  constructor(private el: ElementRef) {
    const originalTitle = this.el.nativeElement.getAttribute("title");
    const originalAriaLabel = this.el.nativeElement.getAttribute("aria-label");
+
    effect(() => {
-      if (originalTitle === null) {
-        this.renderer.setAttribute(this.el.nativeElement, "title", this.title());
-      }
-      if (originalAriaLabel === null) {
-        this.renderer.setAttribute(this.el.nativeElement, "aria-label", this.title());
-      }
+      setA11yTitleAndAriaLabel({
+        element: this.el.nativeElement,
+        title: originalTitle ?? this.title(),
+        label: originalAriaLabel ?? this.title(),
+      });
    });
  }
 }
--- a/libs/components/src/a11y/set-a11y-title-and-aria-label.ts
+++ b/libs/components/src/a11y/set-a11y-title-and-aria-label.ts
@@ -0,0 +1,16 @@
+export function setA11yTitleAndAriaLabel({
+  element,
+  title,
+  label,
+}: {
+  element: HTMLElement;
+  title?: string;
+  label?: string;
+}): void {
+  if (title) {
+    element.setAttribute("title", title);
+  }
+  if (label) {
+    element.setAttribute("aria-label", label);
+  }
+}
--- a/libs/components/src/async-actions/in-forms.mdx
+++ b/libs/components/src/async-actions/in-forms.mdx
@@ -125,7 +125,13 @@ handler.

 ```html
 <button type="button" bitFormButton bitButton [bitAction]="handler">Do action</button>
-<button type="button" bitFormButton bitIconButton="bwi-star" [bitAction]="handler"></button>
+<button
+  type="button"
+  bitFormButton
+  bitIconButton="bwi-star"
+  label="Your label here"
+  [bitAction]="handler"
+></button>
 ```

 ## `[bitSubmit]` Disabled Form Submit
--- a/libs/components/src/async-actions/in-forms.stories.ts
+++ b/libs/components/src/async-actions/in-forms.stories.ts
@@ -7,6 +7,7 @@ import { delay, of } from "rxjs";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";

+import { A11yTitleDirective } from "../a11y";
 import { ButtonModule } from "../button";
 import { FormFieldModule } from "../form-field";
 import { IconButtonModule } from "../icon-button";
@@ -28,20 +29,21 @@ const template = `
    <bit-form-field>
      <bit-label>Email</bit-label>
      <input bitInput formControlName="email" />
-      <button type="button" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
+      <button type="button" label="Refresh" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
    </bit-form-field>

    <button class="tw-me-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
    <button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
    <button class="tw-me-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
    <button class="tw-me-2" type="button" buttonType="secondary" bitButton bitFormButton [disabled]="true">Disabled</button>
-    <button class="tw-me-2" type="button" buttonType="muted" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
+    <button class="tw-me-2" type="button" buttonType="muted" bitIconButton="bwi-star" label="Delete" bitFormButton [bitAction]="delete">Delete</button>
  </form>`;

@Component({
  selector: "app-promise-example",
  template,
  imports: [
+    A11yTitleDirective,
    AsyncActionsModule,
    ButtonModule,
    FormFieldModule,
@@ -86,6 +88,7 @@ class PromiseExampleComponent {
  selector: "app-observable-example",
  template,
  imports: [
+    A11yTitleDirective,
    AsyncActionsModule,
    ButtonModule,
    FormFieldModule,
--- a/libs/components/src/async-actions/standalone.mdx
+++ b/libs/components/src/async-actions/standalone.mdx
@@ -63,7 +63,7 @@ from how click handlers are usually defined with the output syntax `(click)="han
 ```html
 <button bitButton [bitAction]="handler">Do action</button>

-<button bitIconButton="bwi-trash" [bitAction]="handler"></button>`;
+<button bitIconButton="bwi-trash" label="Your label here" [bitAction]="handler"></button>`;
 ```

 ## Stories
--- a/libs/components/src/async-actions/standalone.stories.ts
+++ b/libs/components/src/async-actions/standalone.stories.ts
@@ -16,7 +16,7 @@ const template = /*html*/ `
  <button type="button" bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
    Perform action {{ statusEmoji }}
  </button>
-  <button type="button" bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
+  <button type="button" label="Delete" bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;

@Component({
  template,
--- a/libs/components/src/banner/banner.component.html
+++ b/libs/components/src/banner/banner.component.html
@@ -19,8 +19,7 @@
      buttonType="main"
      size="small"
      (click)="onClose.emit()"
-      [attr.title]="'close' | i18n"
-      [attr.aria-label]="'close' | i18n"
+      [label]="'close' | i18n"
    ></button>
  }
 </div>
--- a/libs/components/src/breadcrumbs/breadcrumbs.component.html
+++ b/libs/components/src/breadcrumbs/breadcrumbs.component.html
@@ -35,6 +35,7 @@
    bitIconButton="bwi-ellipsis-h"
    [bitMenuTriggerFor]="overflowMenu"
    size="small"
+    [label]="'moreBreadcrumbs' | i18n"
  ></button>
  <bit-menu #overflowMenu>
    @for (breadcrumb of overflow; track breadcrumb) {
--- a/libs/components/src/breadcrumbs/breadcrumbs.component.ts
+++ b/libs/components/src/breadcrumbs/breadcrumbs.component.ts
@@ -2,6 +2,8 @@ import { CommonModule } from "@angular/common";
 import { Component, ContentChildren, QueryList, input } from "@angular/core";
 import { RouterModule } from "@angular/router";

+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { IconButtonModule } from "../icon-button";
 import { LinkModule } from "../link";
 import { MenuModule } from "../menu";
@@ -16,7 +18,7 @@ import { BreadcrumbComponent } from "./breadcrumb.component";
@Component({
  selector: "bit-breadcrumbs",
  templateUrl: "./breadcrumbs.component.html",
-  imports: [CommonModule, LinkModule, RouterModule, IconButtonModule, MenuModule],
+  imports: [I18nPipe, CommonModule, LinkModule, RouterModule, IconButtonModule, MenuModule],
 })
 export class BreadcrumbsComponent {
  readonly show = input(3);
--- a/libs/components/src/breadcrumbs/breadcrumbs.stories.ts
+++ b/libs/components/src/breadcrumbs/breadcrumbs.stories.ts
@@ -2,9 +2,12 @@ import { Component, importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";

+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
 import { IconButtonModule } from "../icon-button";
 import { LinkModule } from "../link";
 import { MenuModule } from "../menu";
+import { I18nMockService } from "../utils";

 import { BreadcrumbComponent } from "./breadcrumb.component";
 import { BreadcrumbsComponent } from "./breadcrumbs.component";
@@ -26,6 +29,16 @@ export default {
  decorators: [
    moduleMetadata({
      imports: [LinkModule, MenuModule, IconButtonModule, RouterModule, BreadcrumbComponent],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              moreBreadcrumbs: "More breadcrumbs",
+            });
+          },
+        },
+      ],
    }),
    applicationConfig({
      providers: [
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -37,8 +37,7 @@
        buttonType="main"
        size="default"
        bitDialogClose
-        [attr.title]="'close' | i18n"
-        [attr.aria-label]="'close' | i18n"
+        [label]="'close' | i18n"
      ></button>
    }
  </header>
--- a/libs/components/src/dialog/dialog/dialog.stories.ts
+++ b/libs/components/src/dialog/dialog/dialog.stories.ts
@@ -101,8 +101,7 @@ export const Default: Story = {
            bitIconButton="bwi-trash"
            buttonType="danger"
            size="default"
-            title="Delete"
-            aria-label="Delete"></button>
+            label="Delete"></button>
        </ng-container>
      </bit-dialog>
    `,
@@ -219,7 +218,7 @@ export const WithCards: Story = {
              <h2 bitTypography="h6">
                Foo
              </h2>
-              <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+              <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
            </bit-section-header>
            <bit-card>
              <bit-form-field>
@@ -239,7 +238,7 @@ export const WithCards: Story = {
              <h2 bitTypography="h6">
                Bar
              </h2>
-              <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+              <button label="Favorite" type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
            </bit-section-header>
            <bit-card>
              <bit-form-field>
@@ -265,8 +264,7 @@ export const WithCards: Story = {
            bitIconButton="bwi-trash"
            buttonType="danger"
            size="default"
-            title="Delete"
-            aria-label="Delete"></button>
+            label="Delete"></button>
        </ng-container>
      </bit-dialog>
  </form>
--- a/libs/components/src/disclosure/disclosure.component.ts
+++ b/libs/components/src/disclosure/disclosure.component.ts
@@ -28,6 +28,7 @@ let nextId = 0;
  *   bitIconButton="bwi-sliders"
  *   [buttonType]="'muted'"
  *   [bitDisclosureTriggerFor]="disclosureRef"
+  *   [label]="'Settings' | i18n"
  * ></button>
  * <bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure>
  * ```
--- a/libs/components/src/disclosure/disclosure.stories.ts
+++ b/libs/components/src/disclosure/disclosure.stories.ts
@@ -27,7 +27,7 @@ export const DisclosureWithIconButton: Story = {
  render: (args) => ({
    props: args,
    template: /*html*/ `
-      <button type="button" bitIconButton="bwi-sliders" [buttonType]="'muted'" [bitDisclosureTriggerFor]="disclosureRef">
+      <button type="button" label="Settings" bitIconButton="bwi-sliders" [buttonType]="'muted'" [bitDisclosureTriggerFor]="disclosureRef">
      </button>
      <bit-disclosure #disclosureRef class="tw-text-main tw-block" open>click button to hide this content</bit-disclosure>
    `,
--- a/libs/components/src/drawer/drawer-header.component.html
+++ b/libs/components/src/drawer/drawer-header.component.html
@@ -5,11 +5,5 @@
      {{ title() }}
    </h2>
  </div>
-  <button
-    bitIconButton="bwi-close"
-    type="button"
-    bitDrawerClose
-    [attr.title]="'close' | i18n"
-    [attr.aria-label]="'close' | i18n"
-  ></button>
+  <button bitIconButton="bwi-close" type="button" bitDrawerClose [label]="'close' | i18n"></button>
 </header>
--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -239,8 +239,8 @@ export const Readonly: Story = {
      <bit-form-field>
        <bit-label>Input</bit-label>
        <input bitInput type="password" value="Foobar" [readonly]="true" />
-        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Input'"></button>
+        <button type="button" label="Toggle password" bitIconButton bitSuffix bitPasswordInputToggle></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Input'"></button>
      </bit-form-field>

      <bit-form-field>
@@ -261,7 +261,7 @@ export const Readonly: Story = {
              <bit-label>Input</bit-label>
              <input bitInput type="password" value="Foobar" readonly />
              <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
-              <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Input'"></button>
+              <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Input'"></button>
            </bit-form-field>

            <bit-form-field>
@@ -309,11 +309,11 @@ export const ButtonInputGroup: Story = {
            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
          </a>
        </bit-label>
-        <button type="button" bitPrefix bitIconButton="bwi-star" [appA11yTitle]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" [label]="'Favorite Label'"></button>
        <input bitInput placeholder="Placeholder" />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" [label]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" [label]="'Menu Label'"></button>
      </bit-form-field>
    `,
  }),
@@ -326,11 +326,11 @@ export const DisabledButtonInputGroup: Story = {
    template: /*html*/ `
      <bit-form-field>
        <bit-label>Label</bit-label>
-        <button type="button" bitPrefix bitIconButton="bwi-star" disabled [appA11yTitle]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" disabled [label]="'Favorite Label'"></button>
        <input bitInput placeholder="Placeholder" disabled />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" disabled [appA11yTitle]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" disabled [appA11yTitle]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" disabled [label]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" disabled [label]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [label]="'Menu Label'"></button>

      </bit-form-field>
    `,
@@ -345,9 +345,9 @@ export const PartiallyDisabledButtonInputGroup: Story = {
      <bit-form-field>
        <bit-label>Label</bit-label>
        <input bitInput placeholder="Placeholder" disabled />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" [label]="'Hide Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [label]="'Menu Label'"></button>
      </bit-form-field>
    `,
  }),
--- a/libs/components/src/form-field/password-input-toggle.spec.ts
+++ b/libs/components/src/form-field/password-input-toggle.spec.ts
@@ -20,7 +20,13 @@ import { BitPasswordInputToggleDirective } from "./password-input-toggle.directi
      <bit-form-field>
        <bit-label>Password</bit-label>
        <input bitInput type="password" />
-        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+        <button
+          type="button"
+          label="Toggle password visibility"
+          bitIconButton
+          bitSuffix
+          bitPasswordInputToggle
+        ></button>
      </bit-form-field>
    </form>
  `,
--- a/libs/components/src/form-field/password-input-toggle.stories.ts
+++ b/libs/components/src/form-field/password-input-toggle.stories.ts
@@ -48,7 +48,7 @@ export const Default: Story = {
        <bit-form-field>
          <bit-label>Password</bit-label>
          <input bitInput type="password" />
-          <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+          <button type="button" label="Toggle password visibility" bitIconButton bitSuffix bitPasswordInputToggle></button>
        </bit-form-field>
      </form>
    `,
@@ -63,7 +63,7 @@ export const Binding: Story = {
        <bit-form-field>
          <bit-label>Password</bit-label>
          <input bitInput type="password" />
-          <button type="button" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
+          <button type="button" label="Toggle password visibility" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
        </bit-form-field>
  
        <label class="tw-text-main">
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -1,8 +1,9 @@
 import { NgClass } from "@angular/common";
-import { Component, computed, ElementRef, HostBinding, input, model } from "@angular/core";
+import { Component, computed, effect, ElementRef, HostBinding, input, model } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";

+import { setA11yTitleAndAriaLabel } from "../a11y/set-a11y-title-and-aria-label";
 import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 import { FocusableElement } from "../shared/focusable-element";

@@ -62,7 +63,7 @@ const sizes: Record<IconButtonSize, string[]> = {
  small: ["tw-text-base", "tw-p-2", "tw-rounded"],
 };
 /**
-  * Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label`.
+  * Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label` that are added via the `label` input.

  * The most common use of the icon button is in the banner, toast, and modal components as a close button. It can also be found in tables as the 3 dot option menu, or on navigation list items when there are options that need to be collapsed into a menu.

@@ -94,6 +95,14 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE

  readonly size = model<IconButtonSize>("default");

+  /**
+   * label input will be used to set the `aria-label` attributes on the button.
+   * This is for accessibility purposes, as it provides a text alternative for the icon button.
+   *
+   * NOTE: It will also be used to set the `title` attribute on the button if no `title` is provided.
+   */
+  readonly label = input<string>();
+
  @HostBinding("class") get classList() {
    return [
      "tw-font-semibold",
@@ -159,5 +168,15 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
    return this.elementRef.nativeElement;
  }

-  constructor(private elementRef: ElementRef) {}
+  constructor(private elementRef: ElementRef) {
+    const originalTitle = this.elementRef.nativeElement.getAttribute("title");
+
+    effect(() => {
+      setA11yTitleAndAriaLabel({
+        element: this.elementRef.nativeElement,
+        title: originalTitle ?? this.label(),
+        label: this.label(),
+      });
+    });
+  }
 }
--- a/libs/components/src/icon-button/icon-button.stories.ts
+++ b/libs/components/src/icon-button/icon-button.stories.ts
@@ -9,6 +9,7 @@ export default {
  component: BitIconButtonComponent,
  args: {
    bitIconButton: "bwi-plus",
+    label: "Your button label here",
  },
  argTypes: {
    buttonType: {
--- a/libs/components/src/item/item.mdx
+++ b/libs/components/src/item/item.mdx
@@ -102,10 +102,10 @@ Actions are commonly icon buttons or badge buttons.
      <button type="button" bitBadge variant="primary">Auto-fill</button>
    </bit-item-action>
    <bit-item-action>
-      <button type="button" bitIconButton="bwi-clone" aria-label="Copy"></button>
+      <button type="button" bitIconButton="bwi-clone" label="Copy"></button>
    </bit-item-action>
    <bit-item-action>
-      <button type="button" bitIconButton="bwi-ellipsis-v" aria-label="Options"></button>
+      <button type="button" bitIconButton="bwi-ellipsis-v" label="Options"></button>
    </bit-item-action>
  </ng-container>
 </bit-item>
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -77,10 +77,10 @@ export const Default: Story = {
            <button type="button" bitBadge variant="primary">Fill</button>
          </bit-item-action>
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
          </bit-item-action>
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
          </bit-item-action>
        </ng-container>
      </bit-item>
@@ -150,10 +150,10 @@ export const TextOverflowTruncate: Story = {
        </bit-item-content>
        <ng-container slot="end">
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
          </bit-item-action>
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
          </bit-item-action>
        </ng-container>
      </bit-item>
@@ -173,10 +173,10 @@ export const TextOverflowWrap: Story = {
        </bit-item-content>
        <ng-container slot="end">
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
          </bit-item-action>
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
          </bit-item-action>
        </ng-container>
      </bit-item>
@@ -198,10 +198,10 @@ const multipleActionListTemplate = /*html*/ `
          <button type="button" bitBadge variant="primary">Fill</button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
        </bit-item-action>
      </ng-container>
    </bit-item>
@@ -217,10 +217,10 @@ const multipleActionListTemplate = /*html*/ `
          <button type="button" bitBadge variant="primary">Fill</button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
        </bit-item-action>
      </ng-container>
    </bit-item>
@@ -236,10 +236,10 @@ const multipleActionListTemplate = /*html*/ `
          <button type="button" bitBadge variant="primary">Fill</button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
        </bit-item-action>
      </ng-container>
    </bit-item>
@@ -255,10 +255,10 @@ const multipleActionListTemplate = /*html*/ `
          <button type="button" bitBadge variant="primary">Fill</button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
        </bit-item-action>
      </ng-container>
    </bit-item>
@@ -274,10 +274,10 @@ const multipleActionListTemplate = /*html*/ `
          <button type="button" bitBadge variant="primary">Fill</button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
        </bit-item-action>
      </ng-container>
    </bit-item>
@@ -293,10 +293,10 @@ const multipleActionListTemplate = /*html*/ `
          <button type="button" bitBadge variant="primary">Fill</button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-clone" size="small"></button>
+          <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
        </bit-item-action>
        <bit-item-action>
-          <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+          <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
        </bit-item-action>
      </ng-container>
    </bit-item>
@@ -410,10 +410,10 @@ export const VirtualScrolling: Story = {
                <button type="button" bitBadge variant="primary">Fill</button>
              </bit-item-action>
              <bit-item-action>
-                <button type="button" bitIconButton="bwi-clone" size="small"></button>
+                <button type="button" bitIconButton="bwi-clone" size="small" label="Clone"></button>
              </bit-item-action>
              <bit-item-action>
-                <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+                <button type="button" bitIconButton="bwi-ellipsis-v" size="small" label="More options"></button>
              </bit-item-action>
            </ng-container>
          </bit-item>
@@ -440,10 +440,10 @@ export const WithoutBorderRadius: Story = {
            <button type="button" bitBadge variant="primary">Fill</button>
          </bit-item-action>
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone"></button>
+            <button type="button" bitIconButton="bwi-clone" label="Clone"></button>
          </bit-item-action>
          <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" label="More options"></button>
          </bit-item-action>
        </ng-container>
      </bit-item>
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -18,11 +18,10 @@
        [buttonType]="'nav-contrast'"
        (click)="toggle($event)"
        size="small"
-        [title]="'toggleCollapse' | i18n"
        aria-haspopup="true"
        [attr.aria-expanded]="open().toString()"
        [attr.aria-controls]="contentId"
-        [attr.aria-label]="['toggleCollapse' | i18n, text()].join(' ')"
+        [label]="['toggleCollapse' | i18n, text()].join(' ')"
      ></button>
    </ng-template>
    <ng-container slot="end">
--- a/libs/components/src/navigation/nav-item.stories.ts
+++ b/libs/components/src/navigation/nav-item.stories.ts
@@ -95,7 +95,7 @@ export const WithChildButtons: Story = {
          [bitIconButton]="'bwi-pencil-square'"
          [buttonType]="'nav-contrast'"
          size="small"
-          aria-label="option 2"
+          label="Edit"
        ></button>
        <button
          type="button" 
@@ -104,7 +104,7 @@ export const WithChildButtons: Story = {
          [bitIconButton]="'bwi-check'"
          [buttonType]="'nav-contrast'"
          size="small"
-          aria-label="option 3"
+          label="Confirm"
        ></button>
      </bit-nav-item>
    `,
--- a/libs/components/src/navigation/side-nav.component.html
+++ b/libs/components/src/navigation/side-nav.component.html
@@ -37,7 +37,7 @@
          buttonType="nav-contrast"
          size="small"
          (click)="sideNavService.toggle()"
-          [attr.aria-label]="'toggleSideNavigation' | i18n"
+          [label]="'toggleSideNavigation' | i18n"
          [attr.aria-expanded]="data.open"
          aria-controls="bit-side-nav"
        ></button>
--- a/libs/components/src/popover/popover.component.html
+++ b/libs/components/src/popover/popover.component.html
@@ -18,8 +18,7 @@
          <button
            type="button"
            bitIconButton="bwi-close"
-            [attr.title]="'close' | i18n"
-            [attr.aria-label]="'close' | i18n"
+            [label]="'close' | i18n"
            (click)="closed.emit()"
            size="small"
          ></button>
--- a/libs/components/src/section/section.mdx
+++ b/libs/components/src/section/section.mdx
@@ -51,7 +51,7 @@ padding to align the header with the border radius of the card/item.
 <bit-section>
  <bit-section-header>
    <h2 bitTypography="h6">I'm a section header</h2>
-    <button bitIconButton="bwi-star" size="small" slot="end"></button>
+    <button bitIconButton="bwi-star" label="Favorite" size="small" slot="end"></button>
  </bit-section-header>
  <bit-card>
    <h3 bitTypography="h3">I'm card content</h3>
--- a/libs/components/src/section/section.stories.ts
+++ b/libs/components/src/section/section.stories.ts
@@ -69,7 +69,7 @@ export const HeaderVariants: Story = {
        <h2 bitTypography="h6">
          Title with icon button suffix
        </h2>
-        <button type="button" bitIconButton="bwi-refresh" size="small"></button>
+        <button type="button" label="Refresh" bitIconButton="bwi-refresh" size="small"></button>
      </bit-section-header>
    `,
  }),
@@ -88,7 +88,7 @@ export const HeaderEndSlotVariants: Story = {
        <h2 bitTypography="h6">
          Title with end slot icon button
        </h2>
-        <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+        <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
      </bit-section-header>
    `,
  }),
@@ -103,7 +103,7 @@ export const HeaderWithPadding: Story = {
            <h2 bitTypography="h6">
              Card as immediate sibling
            </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <bit-card>
            <h3 bitTypography="h3">bit-section-header has padding</h3>
@@ -114,7 +114,7 @@ export const HeaderWithPadding: Story = {
            <h2 bitTypography="h6">
              Card nested in immediate sibling
            </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <div>
            <bit-card>
@@ -127,7 +127,7 @@ export const HeaderWithPadding: Story = {
            <h2 bitTypography="h6">
              Item as immediate sibling
            </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <bit-item>
            <bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
@@ -138,7 +138,7 @@ export const HeaderWithPadding: Story = {
            <h2 bitTypography="h6">
              Item nested in immediate sibling
            </h2>
-            <button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button type="button" label="Favorite" bitIconButton="bwi-star" size="small" slot="end"></button>
          </bit-section-header>
          <bit-item-group>
            <bit-item>
@@ -160,7 +160,7 @@ export const HeaderWithoutPadding: Story = {
            <h2 bitTypography="h6">
              No card or item used
            </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button bitIconButton="bwi-star" size="small" slot="end" label="Favorite"></button>
          </bit-section-header>
          <div>
            <h3 bitTypography="h3">just a div, so bit-section-header has no padding</h3>
@@ -171,7 +171,7 @@ export const HeaderWithoutPadding: Story = {
            <h2 bitTypography="h6">
              Card nested in non-immediate sibling
            </h2>
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
+            <button bitIconButton="bwi-star" size="small" slot="end" label="Favorite"></button>
          </bit-section-header>
          <div class="tw-text-main">
            a div here
--- a/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
@@ -36,7 +36,7 @@ import { TableDataSource, TableModule } from "../../../table";
              <button
                bitIconButton="bwi-ellipsis-v"
                type="button"
-                aria-label="Options"
+                label="Options"
                (click)="openDefaultDialog()"
              ></button>
            </td>
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
@@ -80,7 +80,13 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
          </button>
        </bit-label>
        <input bitInput type="password" formControlName="password" />
-        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
+        <button
+          type="button"
+          label="Toggle password visibility"
+          bitIconButton
+          bitSuffix
+          bitPasswordInputToggle
+        ></button>
      </bit-form-field>

      <div class="tw-mb-6">
--- a/libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/kitchen-sink-table.component.ts
@@ -23,6 +23,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
              type="button"
              bitIconButton="bwi-ellipsis-v"
              [bitMenuTriggerFor]="menu1"
+              label="Options"
            ></button>
            <bit-menu #menu1>
              <a href="#" bitMenuItem>Anchor link</a>
@@ -40,6 +41,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
              type="button"
              bitIconButton="bwi-ellipsis-v"
              [bitMenuTriggerFor]="menu2"
+              label="Options"
            ></button>
            <bit-menu #menu2>
              <a href="#" bitMenuItem>Anchor link</a>
--- a/libs/components/src/toast/toast.component.html
+++ b/libs/components/src/toast/toast.component.html
@@ -25,6 +25,7 @@
      type="button"
      size="small"
      (click)="this.onClose.emit()"
+      [label]="'close' | i18n"
    ></button>
  </div>
  <div class="tw-h-1 tw-w-full tw-bg-text-main/30" [style.width]="progressWidth() + '%'"></div>
--- a/libs/eslint/components/index.mjs
+++ b/libs/eslint/components/index.mjs
@@ -0,0 +1,3 @@
+import requireLabelOnBiticonbutton from "./require-label-on-biticonbutton.mjs";
+
+export default { rules: { "require-label-on-biticonbutton": requireLabelOnBiticonbutton } };
--- a/libs/eslint/components/require-label-on-biticonbutton.mjs
+++ b/libs/eslint/components/require-label-on-biticonbutton.mjs
@@ -0,0 +1,51 @@
+export const errorMessage =
+  "Elements with 'bitIconButton' must also have a 'label' attribute for accessibility.";
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Require a label attribute on elements with bitIconButton, except when ignored attributes are present",
+      category: "Best Practices",
+      recommended: false,
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          ignoreIfHas: {
+            type: "array",
+            items: { type: "string" },
+            description: "Attributes that, if present, will skip the label requirement.",
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+  create(context) {
+    const [{ ignoreIfHas = [] } = {}] = context.options;
+
+    return {
+      Element(node) {
+        const allAttrNames = [
+          ...(node.attributes?.map((attr) => attr.name) ?? []),
+          ...(node.inputs?.map((input) => input.name) ?? []),
+          ...(node.templateAttrs?.map((attr) => attr.name) ?? []),
+        ];
+
+        const hasBitIconButton = allAttrNames.includes("bitIconButton");
+        const hasLabel = allAttrNames.includes("label");
+        const shouldIgnore = ignoreIfHas.some((attr) => allAttrNames.includes(attr));
+
+        if (hasBitIconButton && !shouldIgnore && !hasLabel) {
+          context.report({
+            node,
+            message: errorMessage,
+          });
+        }
+      },
+    };
+  },
+};
--- a/libs/tools/export/vault-export/vault-export-ui/src/components/export.component.html
+++ b/libs/tools/export/vault-export/vault-export-ui/src/components/export.component.html
@@ -89,6 +89,7 @@
            appStopClick
            bitSuffix
            (click)="generatePassword()"
+            [label]="'generatePassword' | i18n"
          ></button>
          <button
            type="button"
@@ -98,6 +99,7 @@
            bitSuffix
            [appCopyClick]="filePassword"
            [valueLabel]="'password' | i18n"
+            [label]="'password' | i18n"
            showToast
          ></button>
          <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
--- a/libs/tools/generator/components/src/credential-generator-history.component.html
+++ b/libs/tools/generator/components/src/credential-generator-history.component.html
@@ -12,7 +12,7 @@
        bitIconButton="bwi-clone"
        [appCopyClick]="credential.credential"
        [valueLabel]="getGeneratedValueText(credential)"
-        [appA11yTitle]="getCopyText(credential)"
+        [label]="getCopyText(credential)"
        showToast
      >
        {{ getCopyText(credential) }}
--- a/Show More
+++ b/Show More